Vue-CLI项目搭建

在之前的vue学习中，都是在html中编写的，但是在一个vue项目中，都是以vue后缀的文件编写组件的。

创建vue项目需要node.js环境，node.js是一款后端语言。

 Vue-CLI 项目搭建

第一步：安装node.js，下载地址：下载 | Node.js 中文网 (nodejs.cn)，一路下一步，安装完成后会自动添加到环境变量中，这个时候你的cmd就会多了两个命令：

• node：进入node.js环境
• npm：安装模块用

第二步：安装vue-cli，打开cmd窗口输入

npm install -g @vue/cli

如果下载慢，可以用以下命令：

npm install -g @vue/cli --registry=https://registry.npm.taobao.org

或者

# 先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后都用cnpm替代npm使用
cnpm install -g @vue/cli

第三步：创建vue项目，会在当前目录创建。

vue create 项目名

这时候会出现配置选择，通过方向键上下选择，回车确认。

继续方向键选择，按空格选中，选中如图三个选项，回车确认。

选择vue版本，这里我选2.x

然后输入y。

选择第二个。

最后选择是否保存当前的配置选择，输入y保存，输入n取消。保存后以后创建vue项目可以直接用保存好的配置，较方便。

这时候就创建完毕了。

第三步的另外一种方式：使用图形化界面创建vue项目，打开cmd窗口输入：vue ui

运行后会出现一个地址，访问地址，创建流程如下：

第四步：运行vue项目

• 方式一：cmd窗口cd到你创建的项目内，执行 》》》npm run serve

• 方式二：使用pycharm、HbuildX等应用打开vue项目运行。