vue-cli3创建项目

vue-cli3

创建一个配置文件

vue-cli3创建项目

1. 使用命令

   vue ui
   

2. 选择配置

   #创建项目名称
   #选择npm包管理器
   #选择【若目标文件夹已存在则将其覆盖】
   #选择【手动】
   #选择
   	-Babel
   	-Router
   	-Vuex
   	-Css Pre-processors
   	-Linter / Formater
   	-Unit Testing
   	-使用配置文件
   #选择【Sass/SCSS(with dart-sass)】
   #选择【EsLint + Prettier】
   #选择【Mocha + Chai】
   

3. 开始创建项目

创建.editorconfig文件

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

统一团队的编辑器的设置。

创建.prettierrc.js文件

// https://prettier.io/docs/en/options.html
module.exports = {
    //标签宽度
    tabWidth: 4,
    //超过200字符换行
    printWidth: 200,
    //使用单引号而不是双引号。
    singleQuote: true,
    //没有尾随逗号
    trailingComma: 'none',
    //在对象文字中的括号之间打印空格。
    bracketSpacing: true,
    //将>多行JSX元素的放在最后一行的末尾，而不是一个人放在下一行
    jsxBracketSameLine: false,
    //在语句末尾打印分号。
    semi: true,
    htmlWhitespaceSensitivity: "ignore",
    endOfLine: "auto"
};

eslint+prettierrc同一代码格式，eslint检测代码是否符合代码规则，prettierrc只是负责美化代码，如果使用vscode编辑器可以安装Prettier - Code formatter插件，然后格式化代码。

创建.eslintignore文件

node_modules/
.idea/
.vscode/
build/*.js
src/assets
public
dist
.prettierrc.js
.eslintrc.js

忽略指定文件的eslint检查。

创建vue.config.js文件

对vue和webpack进行配置

引入移动端自适应的插件

npm install amfe-flexible --save
npm install  postcss-pxtorem --save

amfe-flexible插件进行自适应配置，主要包括动态计算并设置根节点的font-size，设置移动端常见的meta标签；

// src/main.js
import 'amfe-flexible';

px2rem-loader可以将指定范围的css文件中的px转化为rem;

打开vue.config.js文件

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-pxtorem")({
                        // 把px单位换算成rem单位
                        rootValue: 75, // 换算的基数(设计图750的根字体为75)
                        selectorBlackList: ["weui", "mu"], // 忽略转换正则匹配项
                        propList: ["*"]
                    })
                ]
            }
        }
    }
};

配置autoprefixer

此插件可以给存在兼容性的代码，添加不同环境需要的前缀。这里推荐使用**postcss-preset-env**插件，这个插件可以将最新的css转化为可以在生产环境使用的css代码。

安装插件：

npm install postcss-preset-env

打开vue.config.js文件，添加插件

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-preset-env'),
                    ......
                ]
            }
        }
    }
};

在项目中使用存在兼容问题的代码，例如display: flex;运行项目，查看是否有多个前缀的display: flex;例如下面：

.about[data-v-039c5b43] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

引入全局的CSS

使用**normalize.css**插件来实现样式的重置。

安装插件：

npm install --save normalize.css

打开main.js文件，引入插件

import 'normalize.css';

设置全局的scss变量

创建scss文件

// src/styles/mixin.scss
// 单行文本溢出
@mixin oneline-text-overflow {
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

打开vue.config.js文件，添加以下代码：

// vue.config.js
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const isAnalyz = process.argv.slice(3).some(item => item === '--analyz');

module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                // 所以这里假设你有 `src/styles/mixin.sass` 这个文件
                // 注意：在 sass-loader v7 中，这个选项名是 "data"
                prependData: `@import "~@/styles/mixin.scss"`
            },
            // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
            // 因为 `scss` 语法在内部也是由 sass-loader 处理的
            // 但是在配置 `data` 选项的时候
            // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
            // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
            scss: {
                prependData: `@import "~@/styles/mixin.scss";`
            },
            ......
        }
    },
    ......
};

使用声明的全局变量

// src/views/note/NoteListCell.vue

设置本地node服务器

打开vue.config.js文件,添加以下代码

module.exports = {
    ......,
    devServer: {
        open: true, // 是否自动打开默认浏览器
        port: 9001, // 使用的端口
        progress: false // 是否显示打包进度
    }
};

配置webpack

const path = require("path");

module.exports = {
    ......,
    configureWebpack: {
        name: "测试使用vue-cli3",
        resolve: {
            // 配置解析规则
            alias: {
                "@": path.join(__dirname, "src") // 使用@别名简写src目录所在的绝对路径
            },
            extensions: [".js", ".vue"] // 自动解析确定的扩展。例如：import File from '../path/to/file'
        },
        performance: {
            // 配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
            maxEntrypointSize: 500000, //入口文件最大bytes（500k）
            maxAssetSize: 500000 //任何单文件最大bytes（500k）
        }
    }
};

完成了一个简单的配置。

配置环境变量和模式

你可以替换你的项目根目录中的下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

**模式(mode)**是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
production 	模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 	    模式用于 vue-cli-service test:unit

注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。

模式的优先级：

已存在的模式 > .env.production > others

一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_SECRET=secret

被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。

现在创建以下文件：

.env.development.local  #创建本地开发时环境变量配置文件
.env.development	    #创建线上开发时环境变量配置文件
.env.production			#创建线上生产时环境变量配置文件
.env.test.local			#创建本地测试时环境变量配置文件
.env.test				#创建线上测试时环境变量配置文件

每个文件中建议设置以下内容:

#环境变量名称
NODE_ENV='production'

#接口地址
REQUEST_BASE_URL='http://192.168.50.4:7001/'

配置VUE Router

在路由的文件夹下创建modules文件夹，文件路径：

router/
	-modules/		#定义路由的模块集合
		-user.js	#用户模块
	-index.js		#读取并合并模块的路由，路由的全局处理，导出路由

读取并合并路由的代码：

const routes = (moduleFiles => {
    return moduleFiles.keys().reduce((modules, modulePath) => {
        const value = moduleFiles(modulePath);
        modules.push(...value.default);
        return modules;
    }, []);
})(require.context('./modules', false, /\.js$/));

解析代码的含义：

#下面的代码表示读取当前目录下的modules目录，但是不读取modules的子目录，且只匹配.js文件
require.context('./modules', false, /\.js$/) 
#moduleFiles是require.context函数返回一个读取文件的函数，类似于import
moduleFiles
#moduleFiles.keys()返回modules文件夹下所有的文件名的数组集合
moduleFiles.keys()
#reduce是一个数组累加器函数
.reduce()
#下面代码是获取文件中定义的路由数组
const value = moduleFiles(modulePath);

登录模块的路由

// src/router/modules/user.js
export default [
    {
        path: '/login',
        name: 'login',
        meta: { title: '登录' },
        component: () => import('@/views/user/Login.vue')
    }
];

配置VUEX

与上面的vue router的配置相似；

在store文件夹下，创建目录：

store/
	-modules/		#定义vuex的模块集合
		-user.js	#登录模块
	-index.js		#读取并合并模块，状态的全局处理，导出vuex

读取并合并路由的代码：

const modules = (modulesFiles => {
    return modulesFiles.keys().reduce((modules, modulePath) => {
        const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
        const value = modulesFiles(modulePath);
        modules[moduleName] = value.default;
        return modules;
    }, {});
})(require.context('./modules', false, /\.js$/));

解析代码的含义：

#下面的代码是通过正则获取不带后缀的文件名称
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');

登录模块状态

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

常用插件

babel-plugin-transform-remove-console插件可以在生产环境删除开发时使用console.*函数。

安装：

npm install babel-plugin-transform-remove-console --save-dev

在babel.config.js中使用：

const isProduction = process.env.NODE_ENV === 'production';

module.exports = function(api) {
    api.cache(false);

    const presets = ['@vue/app'];
    const plugins = [];

    if (isProduction) {
        plugins.push('transform-remove-console');
    }

    return {
        presets,
        plugins
    };
};

webpack-bundle-analyzer插件可以帮助你分析打包的文件；

安装：

npm install --save-dev webpack-bundle-analyzer

vue.config.js文件添加插件：

......;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const isAnalyz = process.argv.slice(3).some(item => item === '--analyz');

module.exports = {
    .......,
    chainWebpack: config => {
        if (isAnalyz) {
            config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin);
        }
    },
    ......
};

package.json文件添加命令：

"scripts": {
    ......,
    "analyz": "vue-cli-service build --analyz"
},

封装axios

安装插件

npm install axios

创建封装axios的js文件

// src/utils/axios.js
import axios from 'axios';
import store from '@/store';
import QS from 'qs';

const http = axios.create({
    baseURL: process.env.VUE_APP_REQUEST_BASE_URL,
    timeout: 30000,
    transformRequest: [data => QS.stringify(data)],
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
});

// request拦截器
http.interceptors.request.use(
    config => {
        if (store.getters.token) {
            config.headers.Authorization = `${store.getters.token}`;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// response拦截器
http.interceptors.response.use(
    response => response.data,
    error => {
        return Promise.reject(error);
    }
);

export default http;

使用封装后的axios

// src/api/user.js
import axios from '@/utils/axios.js';

export function postLogin(params) {
    return axios.post('/user/login', params);
}

export function postVerify(params) {
    return axios.post('/user/verify', params);
}

export function postCreate(params) {
    return axios.post('/user/add', params);
}