Vue 全家桶实战

Vue 全家桶是以 vue2 为核心，和与之息息相关的三个包：vue-cli、 vue-router、 vuex

调试工具 vue-tools

基础环境：

node 环境：14.17.6

nvm ：推荐使用的 node 版本管理器（在 github 上搜索下载）

yarn ：可以替代 npm 的包管理器

1 vue-cli

vue 项目搭建、构建工具

1.1 安装

新版中 Vue CLI 包名称由 vue-cli 改成了 @vue/cli

yarn add @vue/cli -g # 全局安装

1.2 创建项目

vue create project-name

1.3 配置

1.3.1 项目配置审查

vue inspect > output.js

1.3.2集成 sass

安装包的时候，不指定版本号会默认安装最新的安装包，但是最新的并不是最合适的，项目可能会报错！

yarn add sass@1.26.8 sass-loader@8.0.2 --dev

1.3.3 常用配置

// vue.config.js
module.exports = {
    devServer: {
        open: true,
        port: 3001, // 被占用后会被命令行参数覆盖
        proxy: {
            '/apis': {
                target: '',
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        } // 代理配置，支持 http-proxy-middleware 配置项
    }, // 开发环境下的配置；支持所有 webpack-dev-server 选项
    lintOnSave: false, // 传递给 eslint-loader
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir： 'dist',
    assetsDir: 'static',
    productionSourceMap: false, // 关闭生产的 source map
    css: {
		loaderOptions: {
    		postcss: {
				// 传递给 postcss-loader
            }
		}
	},
    configureWebpack: {
        // 这里的选项会通过 webpack-merge 合并到 webpack config 中
    },
    chainWebpack(config) {
        // 接收一个基于 webpack-chain 的 ChainableConfig 实例，即这里的 config
        // config.module.rule(). ... // 链式调用
    }
}

2 vue-router

vue 路由管理器

2.1 动态路由

2.2 路由拦截

2.2.1 公共路由拦截

2.2.2 组件内路由拦截

3 vuex

vue 公共状态管理器

3.1 安装

vue cli 环境下

vue add vuex

其他

yarn add vuex