使用vue-cli脚手架工具创建vue项目

vue-cli 脚手架安装：

1) 确保node环境：安装vue-cli需要在node环境下安装，所以首先确保自己安装了node，检查自己电脑是否安装了node ,可以在命令行工具内执行： node -v，如下图，如果出现相应的版本号信息，说明安装了node 

如果出现类似：xxx不是内部命令，说明电脑没有安装node ,需要在官网下载与你电脑对应的版本的node,进行安装。node的下载地址为：node官网下载地址。

注意：安装vue-cli脚手架需要电脑安装的node的版本在v4.0以上

2)全局安装webpack: 使用npm(npm也是建立在node环境下)全局安装webpack,打开命令行输出： npm install webpack -g，同样的，安装完成后为了确保安装成功，也需要在命令行输入：webpack -v，出现相应的版本才算安装成功，如下图：

注意：从webpack4.0开始，安装webpack时需要安装webpack-cli依赖，所以安装webpack的命令变成：npm install webpack webpack-cli -g

3) 全局安装vue-cli: 在命令行输入: npm install --global vue-cli

等待安装完成后，在命令行输入：vue -V(这里的v是大写)，如下图，出现相应的版本号则是安装成功。

使用vue来构建项目：

这里使用webstorm编辑器来创建项目，首先是创建一个文件夹，右击文件夹-->Open in Terminal进入终端-->输入

npm install -g vue-cli ,给该项目安装脚手架工具，如下图

接着在终端输入：vue init webpack 项目名称(如vue_demo)，自动开始下载vue模板，在过程中可能会要手动的同意安装一些插件之类的，如果不需要就可以直接按enter，等待下载项目依赖等，见下图：

接着按命令行的提示，进入项目目录，输入命令： cd 项目名称（如vue_demo）,进入项目后，输入命令：npm install 进行一些npm依赖等的安装，如下图：

最后运行项目：输入命令 npm run dev 或者npm start,如果出现一些运行信息以及一行网址就是运行成功，见下图：

访问上面的网址即可。

上面的操作创建了一个vue模板项目，项目的目录结构如下图：

分析模板项目的结构：

|-- build : webpack 相关的配置文件夹(基本不需要修改)
       |-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
       |-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules：项目的依赖文件，如router等
|-- src : 源码文件夹
       |-- components: vue 组件及其相关资源文件夹
       |-- App.vue: 应用根主组件
       |-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
 

项目的打包与发布：

打包：还是在项目的终端，输入命令：npm run build

发布：使用静态服务器工具包

输入命令：npm install -g server  ,安装好服务后，输入server dist 就可以，终端会显示一个网站，就是打包好的项目网址，一网址为：http://localhost:5000