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启动的,仅限参考