1. 创建一个项目
npm install -g @vue/cli
vue create my-project
2. 默认预设配置/用户自定义配置
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
3. 自定义配置:选择需要的插件及编译工具
上下操作+空格健可以选中
(*) Choose Vue version
(*) Babel
(*) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
Babel - 代码转换
PWA - 渐进式网页[https://www.jianshu.com/p/7845a13a67d7]
CSS Pre-processors - css预编译器
Linter / Formatter - 代码格式化
Unit Testing - 书写单元测试用的
E2E Testing
? Use class-style component syntax? (Y/n)
# 是否使用class风格进行组件开发 Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
# 使用 babel 对 TypeScript 代码进行编译转换
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# 选择css预编译,这里我们选择less
# 选择代码格式化配置
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only [仅错误预防]
ESLint + Airbnb config [Airbnb配置]
ESLint + Standard config [标准配置- Standard标准它是一些前端工程师自定的标准]
> ESLint + Prettier [推荐使用]
TSLint (deprecated)
> Lint on save 保存时检查
Lint and fix on commit 提交时检查
# 是否将配置放在单独的文件中 Babel,ESlint等
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files [单独保存在各自的配置文件中]
In package.json
4. 运行
npm run serve
目录内容解析
assets: 是页面和组件中用到的静态资源,比如公共样式文件,字体文件,图片等,该文件夹与public的区别是:该文件夹中的资源会被webpack编译
assets: 是页面和组件中用到的静态资源,比如公共样式文件,字体文件,图片等,该文件夹与public的区别是:该文件夹中的资源会被webpack编译
├── .browserslistrc: 文件用于给开发者设置浏览器版本的范围;
├── .eslintrc.js: eslint配置文件;
├── .gitignore: 需要git忽略的文件;
├── .prettierrc.js: 用来自定义格式化的风格,配合eslint使用
├── babel.config.js: babel的配置工具;
├── package.json: 项目的描述文件,包括项目名、依赖的版本、作者、命令、入口文件等信息。
├── package-lock.json: 记录项目依赖中各个依赖之间的关系和版本,防止npm包中有不遵守“相同大版本号的同一个库包,其接口符合兼容要求”这一规范,导致项目运行报错;
├── README.md: 项目的说明文档,项目介绍、License、一些命令(例如:启动命令、打包命令、单元测试命令等)
├── tsconfig.json
├── vue.build.js
├── vue.config.js 自定义配置
vue-cli3和vue-cli2的区别:
- 移除了配置文件目录 config 和 build 文件夹,如果需要自定义配置,需要自己新建vue.config.js文件
- 移除了 static 静态资源文件夹,新增 public 文件夹,静态资源转移到public目录中,通过/xx.xx可以直接访问, 并且 index.html 移动到 public 中
- 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
修改基础配置
module.exports = {
root: true,
env: {
//指定代码的运行环境
browser: true,
node: true,
},
plugins: ['@typescript-eslint'], //定义了该eslint文件所依赖的插件
extends: [
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
'prettier/@typescript-eslint', // 使得@typescript-eslint中的样式规范失效,遵循prettier中的样式规范
'plugin:prettier/recommended', // 使用prettier中的样式规范,且如果使得ESLint会检测prettier的格式问题,同样将格式问题以error的形式抛出
],
parser: 'vue-eslint-parser', //定义ESLint的解析器
parserOptions: {
parser: '@typescript-eslint/parser', //定义ESLint的解析器
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-this-alias': 'off',
'@typescript-eslint/no-var-requires': 'off',
'no-async-promise-executor': 'off',
'no-case-declarations': 'off',
'no-useless-catch': 'off',
'prefer-const': 'off',
'vue/no-v-model-argument': 'off',
},
}
2.prettierrc设置 在项目根目录添加一个 .prettierrc.js,用来自定义格式化的风格
module.exports = {
printWidth: 120, //一行的字符数换行
tabWidth: 2, //一个tab代表几个空格数
useTabs: false, //是否使用tab进行缩进
singleQuote: true, //字符串是否使用单引号
semi: false, //行尾是否使用分号,默认为true
// "trailingComma": "all",
// "bracketSpacing": false,
// "jsxBracketSameLine": true,
// "arrowParens": "avoid",
// "insertPragma": true,
// "useTabs": false
trailingComma: 'none', //是否使用尾逗号
bracketSpacing: true, //对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
endOfLine:"auto" // 保留在 Windows 和 Unix 下的换行符
}