搭建Vue开发环境新手教程

安装Node

Vue项目的搭建需要用到Node，所以这里先安装Node 官网链接：https://nodejs.org/en/ -推荐安装最新版本

安装的步骤很简单,这里就不演示了

安装完后打开终端输入 node -v,如果出来对应的版本号则表示安装成功.

安装node检查

再看看npm,打开终端输入 npm -v

安装npm检查

这两个都出来后就代表真的安装成功了

安装Vue

打开终端输入 npm install vue,开始安装vue 至于说为什么这么装，请看官网解释： https://cn.vuejs.org/v2/guide/installation.html#NPM

安装完后打开终端输入 vue --version

看到版本后代表安装成功,当前最新版本号为3.10.0

安装Vue

接下来安装 vue-cli，这是vue 的一个脚手架,更多的解释请看官方文档：https://cli.vuejs.org/zh/guide/prototyping.html 打开终端输入 npm install -g @vue/cli-service-global 看到下图这些字样就代表安装成功了

Vue脚手架安装

搭建项目

进入D盘(随便你进入哪),打开终端,输入 vue create vue-hello,意思是创建一个项目名为 vue-hello 的vue项目,这里也带上官网的介绍：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

输入命令后会让你选择需要用的依赖

搭建项目（1）

• default (babel,eslint) 这个是默认选择所有依赖 嫌麻烦就直接选这个
• Manually select features 这个是选择部分依赖 我是选择这个

箭头指向第二个后按回车出来以下界面

搭建项目（2）

() 里面有 * 的是代表已经选择的，按空格选择相应的依赖，用什么就选什么我这里为了方便就只选 Router

搭建项目（3）

选好之后按回车 提示你输入 Y/N 你就输入 Y，只有一个 ：就直接按回车

搭建项目（4）

这里选 In package.json，因为我不懂另外一个是什么意思

该弄的弄好之后就就他搭建项目了

运行项目

进度条加载完后即可看到以下界面

运行项目

输入最后两条提示的命令

cd vue-hello npm run serve

看到这个界面就代码启动成功了

项目启动完成

访问地址 http://localhost:8081 看到以下页面 说明一个vue项目搭建好了

项目界面