vue-cli

脚手架：根据业务需求或者功能需求，把需要配置的webpack以及一些每一次都要做的事情进行封装，以后根据脚手架安装，就可以快速把这些东西处理好

基于vue-cli打造vue工程化(cli.vuejs.org/zh/guide/)

安装和基础使用

• 安装
  • 安装 npm i @vue/cli -g
  • $ vue create xxx 创建项目（xxx项目名称遵循npm包名称规则）
    • 默认配置 default
    • 自定义配置 Manually select features
• 文件目录说明
  • 创建组件 xxx.vue
  • 页面模板
  • 构建小案例 api/assets/components/pages/store/…
• 基础使用
  • 开发运行
  • 生产部署
• 默认配置的webpack内容
  • 配置 less/sass

进阶配置

• vue.config.js
• 环境变量和模式
• 浏览器兼容性 github.com/browserslis…

.env.development

NODE_ENV=development
BASE_URL="http://127.0.0.1:8080"

.env.production

NODE_ENV=production
BASE_URL="http://www.baidu.com"

vue.config.js

//配置环境变量和模式
let NODE_ENV = process.env.NODE_ENV,
	BASE_URL = process.env.BASE_URL; 
    
module.exports = {
	// 在服务器打包部署的时候，我们往往会根据服务器部署的地址，指定左右插入资源的统一前缀路径（默认/代表部署到服务器根目录）
    //开发环境下不需要
	publicPath: NODE_ENV === "production" ? '/dist/' : '/',

	// 配置多页面
	pages: {
		index: {
			entry: 'src/main.js',  //page的入口
			template: 'public/index.html',  //模板来源
			filename: 'index.html',  //在dist/index.html的输出,生成的文件名
			// 当使用title选项时，template中的title标签需要是<%= htmlWebpackPlugin.options.title %>
			title: '首页',
            //在这个页面中包含的块，默认情况下会包含
            //提取出来的通用chunk 和 vendor chunk
			chunks: ["chunk-vendors", "chunk-common", "index"]
		},
		login: {
			entry: 'src/login.js',
			template: 'public/login.html',
			filename: 'login.html',
			chunks: ["chunk-vendors", "chunk-common", "login"]
		}
	},
	// 在开发环境下，是否每次代码编译都执行词法检测（开启后：编译会变慢、而且以后在xxx.vue中可能多加一个空格它都编译不过去）
	lintOnSave: false,  //是否在开发的环境下
	productionSourceMap: false,  //方便今后进行调试

	// webpack-dev-server
	devServer: {
		port: 3000,  //指定端口号
		proxy: {
			'/api': {
				target: BASE_URL,
				changeOrigin: true  //跨域请求代理
			}
		}
	}
};

浏览器兼容性

• package.json中

"browserslist": [
    "> 0.5%",
    "last 2 versions",
    "ie 10-11"
  ]

• main.js/login.js中

/* 兼容处理 */
import 'core-js/stable';
import 'regenerator-runtime/runtime';