vue3的构建项目步骤

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 下的换行符
}

vue3的构建项目步骤

猜你喜欢