03-Vue-cli 开启 Vuejs 项目

3-1 Vue-cli介绍

Vue-cli是Vue的脚手架工具

目录结构、本地调试、代码部署、热加载、单元测试

官网：https://cli.vuejs.org/

3-2 Vue-cli安装

node -v # 查看node版本
sudo npm install -g vue-cli # 安装vue-cli
vue
vue list # 列出可使用模板
vue init webpack sell # 创建项目
cd sell # 进入项目主目录
npm install # 安装插件
npm run dev # 运行项目

3-3 项目运行

1. 创建.vue文件：template、script、style
2. export default一个对象
3. import引用，components注册
4. 使用标签

3-4 项目文件介绍

build：webpack配置
config：webpack配置
node_modules：npm install安装的依赖代码库
src：项目源码
assets
components
App.vue
main.js
static：第三方静态资源
test：测试
.babelrc：ES6转ES5的配置
.editorconfig：编译器配置
.eslintignore：忽略语法检查的目录文件
.eslintrc.js：eslint的配置文件
.gitignore：git仓库忽略提交的文件、目录
index.html：入口HTML文件
package.json：项目配置文件
README.md：项目描述文件

3-5 webpack打包（上）

webpack：前端构件工具

package.json

"dev": "node build/dev-server.js"

dev-server.js

var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')

webpack.dev.conf.js

var baseWebpackConfig = require('./webpack.base.conf')

webpack.base.conf.js

utils.js

3-6 webpack打包（中）

3-7 webpack打包（下）