VUE CLI3项目搭建 ESLint配置

VUE项目框架配置

一、工具准备

Node.js安装
安装方法：点击查看
WebStorm安装
下载地址：点击查看

二、环境准备

镜像准备

1.查看代理：npm get registry
2.设置淘宝镜像

2.1临时使用.
npm --registry https://registry.npm.taobao.org install express

2.2持久使用.
npm config set registry https://registry.npm.taobao.org

2.3验证是否成功
npm config get registry 或 npm info express

2.4.还原：
npm config set registry https://registry.npmjs.org/

升级node.js(如果是新版本可跳过)

1.npm install -g n
2.n stable （最新稳定版本）或者 n latest （最新版本）

如果执行第二步报错：Error: sudo required，错误为权限不够。
执行命令
sudo n stable 或者 sudo n latest 即可

升级Vue CLI 3

Vue CLI 需要 Node.js 8.9 或更高版本,如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

1.安装新包：npm install -g @vue/cli
2.查看版本：vue --version 或者 vue -V
3.vue create projectName

询问安装类型，按键盘上下键选择默认（default安装了balel、eslint其余要用什么，需要手动再安装）还是手动（Manually）,此处选择手动。

在这里插入图片描述

0.png

4.Check the features needed for your project:

询问项目的需求，上下键切换，空格选择，回车确认。我选择如下

在这里插入图片描述

1.png

5.Use history mode for router

询问项目的路由模式是否使用History。我选择如下

在这里插入图片描述

2.png

6.Pick a CSS pre-processor

询问项目的CSS预处理器。我选择如下

在这里插入图片描述

3.png

7.Pick a linter / formatter config

询问项目的格式校验方式。我选择如下

在这里插入图片描述

4.png

8.Pick additional lint features

询问项目的什么时候校验格式(1是保存时，2是提交时)。我选择如下

在这里插入图片描述

5.png

9.Pick a unit testing solutio

询问项目的测试框架

在这里插入图片描述

6.png

10.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

询问项目的配置文件存放在哪儿（1是独立文件，2是在package.json）这里选择独立的文件，选择2在后续配置postcs适配时存在问题。

在这里插入图片描述

7.png

11.Save this as a preset for future projects

询问保存该配置是否作为后续项目的可选配置，选择是，则会要求给该配置命名，这个自己定就行,我输入为：default-setting.配置后会在创建项目时：vue create projectName 看到这个配置。

8.png

国际化配置 Vue I18n

1.安装：npm install vue-i18n 或者 vue add i18n (Vue CLI 3)
2.选择默认环境：The locale of project localization. (en) 输入：zh
3.切换的环境The fallback locale of project localization 输入：en
4.打开项目，在src下新建lang目录
5.选择在src下的一个目录作为存放：The directory where store localization messages of project. It's stored under
src directory. (locales)
输入：lang
6.单引号设置：Enable locale messages in Single file components ? (y/N) 输入：y
7.查看目录lang，生成了zh.json en.json

适配插件postcss安装

1.命令安装：npm i --save-dev postcss
2.命令安装：npm isntall postcss-import
3.命令安装：npm i postcss-px-to-viewport
4.命令安装：npm i postcss-aspect-ratio-mini
5.命令安装：npm i postcss-cssnext
6.命令安装：npm i postcss-write-svg
7.命令安装：npm i postcss-viewport-units
8.命令安装：npm i cssnano-preset-advanced --save-dev
9.命令安装：npm install
10.打开项根目录下找到postcss.conf.js
改为：

module.exports = {plugins: {'postcss-import': {},'postcss-aspect-ratio-mini': {},'postcss-write-svg': {utf8: false},'postcss-cssnext': {},'postcss-px-to-viewport': {// 视窗的宽度，对应的是我们设计稿的宽度，一般是750viewportWidth: 750,// 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置viewportHeight: 1334,// 指定`px`转换为视窗单位值的小数位数unitPrecision: 3,// 指定需要转换成的视窗单位，建议使用vwviewportUnit: 'vw',// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名selectorBlackList: ['.ignore', '.hairlines'],// 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值minPixelValue: 1,// 允许在媒体查询中转换`px`mediaQuery: false},'postcss-viewport-units': {filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1},cssnano: {preset: 'advanced',autoprefixer: false,'postcss-zindex': false}}
}
11.npm run serve