Vue之使用脚手架搭建Vue工程

1、新建一个空文件夹，我们利用这个空文件夹来放置我们的Vue项目，注意：最好不要使用中文名称哦。

2、在这个空文件夹中，我们下载一个vue的脚手架（vue-cli）。怎么下载呢？-->我们在空文件夹中点击右键菜单，打开命令行，在这里我使用的命令行界面是GitBash，这个东西大家可以自行选择，也可以使用npm自带的命令行界面。

输入命令(此处我使用的 cnpm ) ： cnpm  install  -g vue-cli

就等着慢慢下载吧，这个看网速，一般下载的时候就会蹦出一大堆英文。

下载完毕之后你会发现，文件夹其实还是空空的，但其实这个文件夹已经依赖vue了。

3、那么要怎么查看我们的vue-cli是否下载成功呢？

再次在命令行界面输入指令 ： vue 

出现以下信息就是安装成功了。

4、下面，我们就可以使用 vue-cli 脚手架来搭建vue工程。

命令行界面输入 ： vue   init   模板名称  工程名称

注：模板名称 一般我们使用 webpack-simple

再去看看我们的放置vue工程的文件，里面多了一个工程。

5、要怎么运行启动这个工程呢？

我们现在使用的是node环境来运行，一般在开发过程中使用，项目部署的时候会打包成静态资源发布到服务器。

打开这个工程，输入命令行（ 此处使用的是 cnpm ） ： cnpm install 

下载好node依赖模块之后，你会发现你的工程文件夹里面多了一个node_modules文件。

6、运行工程

命令 ：npm run dev 

成功会自动弹出浏览器，默认端口：8080 如果端口被占用，请修改工程端口。

7、项目部署

直接在工程目录 打开命令行界面，输入命令 ：npm run build

工程文件夹里面生成一个dist静态资源文件，将这个文件发布到web服务器就行了。