基于 vue-cli3.0 快速构建 vue 项目
本章详细介绍使用 vue-cli3.0 来搭建项目. 本章使用 vue-cli3.0 构建的项目是基于 webpack 的模板文件, 构建后的项目属于单页面 (SPA) 应用. 因此, 该文档后续操作与说明不适用于构建一个多页面应用.
相比于之前有如下优点:
功能丰富: 对 babel,Typescript,ESLint... 提供开箱即用的支持
易于扩展: 它的插件系统可以让社区根据需求构建和共享可复用的解决方案
无需 Eject:vue cli 完全可配置的, 无需再使用 webpack 配置
CLI 图形化界面: vue ui 图形化界面创建, 开发和管理项目
即刻创建原型: 用单个 vue 文件实现新的灵感
面向未来: 为现代浏览器轻松产出原生的 ES2015 代码, 或将你的 vue 组件构建为原生的 Web Components 组件
1,vue-cli3.0 初始化
安装 @vue/cli
- # NPM install -g @vue/cli
- OR
- # yarn global add @vue/cli
你可以使用 vue --version 或者 vue -V 检查其版本
注意事项:
VUE CLI3 的包名称由 vue-cli 改成 @vue/cli. 如果你已经安装了旧版本的 vue-cli(1.x 或 2.x), 你先通过
NPM uninstall vue-cli -g
或
yarn global remove vue-cli
卸载它.
VUE CLI3 需要 node8.9 或更高版本(推荐 8.11.0+)
VUE CLI3 和旧版本使用了相同的 vue 命令, 所以 Vue CLI2(vue-cli)被覆盖了. 如果你仍然需要使用旧版本的 vue init 功能, 你需要全局安装一个桥接工具:
- NPM install -g @vue/cli-init
- Vue init webpack myVue
创建项目
可以使用 vue ui 图形化界面创建和管理项目, 这里不做阐述, 请自行查看 cli.vuejs.org/, 下面以命令行形式进行创建:
vue create vuedemo
你会被提示选取一个 preset. 你可以选默认的包含了基本的 Babel+ESLint 设置的 preset, 也可以选手动选择特性来选取需要的特性.
这个默认的设置非常适合快速创建一个新项目的原型, 而手动设置则提供了更多的选项, 它们是面向生产的项目更加需要的, 下面以 "手动设置" 为例. 以上下键移动, 以空格键进行是否选定
Babel : 将 ES6 编译成 ES5
TypeScript: JavaScript 类型的超集
Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
Router:vue-router
Vuex: 状态管理
CSS Pre-processors: CSS 预处理
Linter / Formatter: 开发规范
Unit Testing: 单元测试
E2E Testing: 端到端测试
如果后续你想在一个已经被创建好的项目中安装插件, 可以使用 vue add 命令:
D:\i\vuedemo> vue add vuex
出现如上字样, 说明安装成功. 请输入命令 cd vuedemo 与 yarn serve 运行环境.
配置文件说明
vue-cli3.0 致力于 Vue 生态中的工具基础标准化. 它确保了各种构建工具能够基于智能的默认配置即可平稳衔接, 这样你就可以专注在撰写应用上, 减少配置的时间. 查看如下文件, 会发现相比于 vue-cli2.0 少了 build 与 config 文件夹, 所以 vue-cli3 提供了一个可选的配置文件 --vue.config.JS. 请具体参考 5.3 和 5.4(打包配置), 这里只详细解读文件作用.
- |-- dist # 打包后文件夹
- |-- public # 静态文件夹
- | |-- favicon.ico
- | |-- index.html #入口页面
- |-- src # 源码目录
- | |--assets # 模块资源
- | |--components # vue 公共组件
- | |--views
- | |--App.vue # 页面入口文件
- | |--main.JS # 入口文件, 加载公共组件
- | |--router.JS # 路由配置
- | |--store.JS # 状态管理
- |-- .env.pre-release # 预发布环境
- |-- .env.production # 生产环境
- |-- .env.test # 测试环境
- |-- vue.config.JS # 配置文件
- |-- .eslintrc.JS # ES-lint 校验
- |-- .gitignore # Git 忽略上传的文件格式
- |-- babel.config.JS # babel 语法编译
- |-- package.JSON # 项目基本信息
- |-- postcss.config.JS # CSS 预处理器(此处默认启用 autoprefixer)
vue.config.JS 配置
Vue.config.JS 是一个可选的配置文件, 如果项目的根目录存在这个文件, 那么它就会被 @vue/cli-service 自动加载. 你也可以使用 package.JSON 中的 vue 字段, 但要注意严格遵守 JSON 的格式来写. 这里使用配置 vue.config.JS 的方式进行处理.
- const webpack = require('webpack')
- module.exports = {
- // 部署应用包时的基本 URL
- publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
- // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
- outputDir: 'dist',
- // 放置生成的静态资源 (JS,CSS,img,fonts) 的 (相对于 outputDir 的) 目录
- assetsDir: 'assets',
- // eslint-loader 是否在保存的时候检查 安装 @vue/cli-plugin-eslint 有效
- lintOnSave: true,
- // 是否使用包含运行时编译器的 Vue 构建版本. 设置 true 后你就可以在使用 template
- runtimeCompiler: true,
- // 生产环境是否生成 sourceMap 文件 sourceMap 的详解请看末尾
- productionSourceMap: true,
- configureWebpack: config => {
- if (process.env.NODE_ENV === 'production') {
- // 为生产环境修改配置...
- } else {
- // 为开发环境修改配置...
- }
- },
- // CSS 相关配置
- CSS: {
- // 是否使用 CSS 分离插件 ExtractTextPlugin 生产环境下是 true, 开发环境下是 false
- extract: true,
- // 开启 CSS source maps?
- sourceMap: false,
- // CSS 预设器配置项
- loaderOptions: {},
- // 启用 CSS modules for all CSS / pre-processor files.
- modules: false
- },
- // webpack-dev-server 相关配置
- devServer: { // 设置代理
- hot: true, // 热加载
- host: '0.0.0.0', //ip 地址
- port: 8085, // 端口
- https: false, //false 关闭 https,true 为开启
- open: true, // 自动打开浏览器
- proxy: {
- '/api': { // 本地
- target: 'xxx',
- // 如果要代理 websockets
- ws: true,
- changeOrigin: true
- },
- '/test': { // 测试
- target: 'xxx'
- },
- '/pre': { // 预发布
- target: 'xxx'
- },
- '/pro': { // 正式
- target: 'xxx'
- }
- }
- },
- pluginOptions: { // 第三方插件配置
- // ...
- }
- }
扩展:
Source map 的作用: 针对打包后的代码进行的处理, 就是一个信息文件, 里面储存着位置信息. 也就是说, 转换后的代码的每一个位置, 所对应的转换前的位置. 有了它, 出错的时候, 除错工具将直接显示原始代码, 而不是转换后的代码. 这无疑给开发者带来了很大方便.
打包配置
创建. env.test 文件, 文件内容如下
- NODE_ENV='test' # 测试环境
- VUE_APP_TT='TT'
创建. env.pre-release 文件, 文件内容如下:
NODE_ENV='pre-release' # 预发布环境
创建. env.production 文件, 文件内容如下:
- NODE_ENV='production' # 正式环境
- VUE_APP_T='la'
- Q='1'
package.JSON 配置
- "scripts": {
- "serve": "vue-cli-service serve",
- "build:pre": "vue-cli-service build --mode pre-release", #预发布环境
- "build:test": "vue-cli-service build --mode test", #测试环境
- "build:prod": "vue-cli-service build --mode production", #正式环境
- "lint": "vue-cli-service lint",
- "test:unit": "vue-cli-service test:unit"
- }
有关环境变量的注意事项
环境名应该与环境文件统一
环境文件放置根目录下
除了 baseUrl 和 NODE_ENV 其他环境变量使用 VUE_APP 开头
来源: http://www.bubuko.com/infodetail-2956126.html