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