初始化项目结构

1.需要的工具

• nodejs、npm
• vue-cli脚手架
• webpack

webpack在vue中的作用

1.vue是通过webpack实现的模块化，vue.js脚手架工具中就使用了webpack模板
2.webpack会对项目中所有的资源做压缩等优化操作

2.安装工具

2.1 安装nodejs

注:安装nodejs的同时，会把npm一起安装好了

• 地址: https://nodejs.org/en/download/
• 下载LTS版本，LTS(Long-Time-Support)长期支持稳定版本，Current-当前版本，测试中，不太稳定

检查是否安装成功

node -v
npm -v

2.2 安装vue-cli

vue-cli脚手架工具，通过命令可以快速搭建一个复杂的单页面应用

npm install vue-cli -g

3.初始化项目

3.1 创建项目
构建基于webpack的模板的项目

vue create 项目名

3.2 安装项目依赖包
需要切换到项目目录，安装依赖

cd vue-first
npm install

4.运行项目

切换到项目目录

// 用哪个命令取决于package.json中scripts对象的启动命令的key值
npm run dev 或 npm run serve 或 npm start

5 打包项目

// 打包不同的环境配置 https://segmentfault.com/a/1190000018776045?utm_source=tag-newest

npm run build