Vue总结篇-vue-cli脚手架

1.安装

1、安装node，安装简单，直接下一步就完事儿，包管理工具npm也同时安装完成；

2、打开命令行工具：开始--运行--cmd--输入node -v--输出版本号就成功了；

3、安装webpack，打开命令行工具：开始--运行--cmd--输入npm install webpack -g--等待安装完成；

4、打开命令行工具：开始--运行--cmd--输入webpack-v--输出版本号就成功了；

5、安装vue-cli脚手架，打开命令行工具：开始--运行--cmd--输入npm install vue-cli -g--等待安装完成；

6、打开命令行工具：开始--运行--cmd--输入vue-V（大写的V）--输出版本号就成功了；

2.构建项目

1、在项目目标的文件夹中，进入本文件夹的命令行工具，主要有如下方式：

         （1）cd目录进入当前文件夹

         （2）按住shift+右击，点击在此处打开porwershell窗口

         （3）如果安装了git，右击点击Git Bash Here

2、打开的命令行工具：输入vue init webpack vueTitle（vueTitle：项目名称，不能是中文）--等待安装完成；

3、安装项目依赖：输入npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行；

4、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入npm install vue-router vue-resource --save；

5、所有安装完成的项目目录如下：

6.启动项目，输入npm run dev,成功在localhost:8080出现vue的主页就是成功启动了；

3.使用技巧

1、开发环境打开使用：npm run dev；打包到本地使用：npm run duild

2、如果config -> index.js 中的 build 代码中的 productionSourceMap=false ，打包后文件体积可以减少百分之八十

3、如果build -> webpack.prod.conf.js -> HtmlWebpackPlugin -> 配置参数添加hash: true，即会使打包生成的index.html中的js和css路径带有？+随机字符串，也就是版本控制

4、打包以后再本地打开会报错，所以需要一个服务器来开启，网上看到一篇express启动的，仅限参考