一、安装 vue-cli v3
二、快速原型开发
安装vue-cli的全局扩展
npm install -g @vue/cli-service-global
启动并打开浏览器
vue serve -o App.vue
build
vue App.vue
三、创建项目
vue create hello-world
tip: 可在选择时preset时,选择预置的babel、vue-router、vuex等。
四、插件管理
安装vue scope插件
vue add @vue/eslint
这相当于:
vue add @vue/cli-plugin-eslint
安装非vue scope插件:
# 安装并调用 vue-cli-plugin-apollo
vue add apollo
两个特殊插件:
vue add router
vue add vuex
五、启动,构建及代码检查
@vue/vue-cli-service ,它是工具
package.json中的片段:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
重要参数:
- serve
用法:vue-cli-service serve [options] [entry]
选项:
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)
- build
用法:vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化