前置知识

  • node 安装
  • npm(yarn,cnpm)
  • webpack(webpack-cli)

基于 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 -gyarn 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图形化界面创建和管理项目,这里不做阐述,请自行查看,下面以命令行形式进行创建:

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 vuedemoyarn serve运行环境。

配置文件说明

vue-cli3.0 致力于 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你就可以专注在撰写应用上,减少配置的时间。查看如下文件,会发现相比于 vue-cli2.0 少了buildconfig文件夹,所以 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"
}
复制代码
有关环境变量的注意事项
  • 环境名应该与环境文件统一
  • 环境文件放置根目录下
  • 除了 baseUrlNODE_ENV 其他环境变量使用 VUE_APP开头

请各位给给意见,查漏补缺,有哪些不足之处请给予意见。呸呸,文档需要上交领导 ---

  • Vue.js

    Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。 主要特性: 可扩展的数据绑定 将普通的 JS 对象作为 model 简洁…

    109 引用
感谢    赞同    分享    收藏    关注    反对    举报    ...