1. 开启项目开发

1.1. 使用Vue CLI 3(脚手架)搭建项目

1. Vue CLI是vue官方提供的用于搭建基于vue+webpack+es6项目的脚手架工具

2. 在线文档: cli.vuejs.org/zh/

3. 操作:

# 使用vue-cli3
npm install -g @vue/cli
vue create shop-client
cd shop-client
npm run serve

# 降级到vue-cli2
npm install -g @vue/cli-init
vue init webpack gshop-client2
cd shop-client
npm run dev

1.2. 项目结构分析

shop-client

​ |-- node_modules

​ |-- public

​ |-- index.html: 主页面文件

​ |-- src

​ |-- main.js: 应用入口js

​ |-- babel.config.js: babel的配置文件

​ |-- .gitignore: git版本管制忽略的配置

​ |-- package.json: 应用包配置文件

​ |-- README.md: 应用描述说明的readme文件

1.3. 编码测试与打包发布项目

1. 编码测试

npm run serve  
访问: http://localhost:8080
编码, 自动编译打包(HMR), 查看效果

2. 打包发布

npm run build
npm install -g serve
serve dist -p 5000
访问: [http://localhost:5000](http://localhost:5000)