乙哥驿站
乙哥驿站

Vue3.x 超详细安装教程

  • 请事先装好 nodeJs
  • 整个 vue-cli 版本：vue 3.0.0 + vue-router 4.0.0-0 + vuex 4.0.0-0 + eslint 6.7.2 + typescript 4.1.5

安装步骤

1. 安装vue-cli

npm 或 yarn 安装

  • npm install -g @vue/cli
  • yarn global add @vue/cli

查看版本（是否安装成功）：

  • vue -V (大写的V)

  • vue --version

    image

    当前我安装的 vue-cli 版本为：4.5.13

2. 创建项目

进入demo目录： cd G:\demo\
创建my-project项目：vue create my-project

image
  1. 提供了三种设置：Vue2版、Vue3版、手动选择功能；
  2. 按键盘上下键选择默认（default）还是手动（Manually）；
  3. 这里我选择第三种：Manually select features；
  4. 回车键确认；

3. 选择配置

选择自己所要集成的配置（格键是选中与取消，A键是全选，回车确定）
这里我的选择如下：

image

配置项：

  1. Choose Vue version：选择 Vue 版本
  2. Babel：支持使用Babel编译器
  3. TypeScript：支持使用 TypeScript 书写源码
  4. Progressive Web App (PWA) Support：支持PWA
  5. Router：支持 vue-router
  6. Vuex：支持 vuex
  7. CSS Pre-processors：支持 CSS 预处理器
  8. Linter / Formatter：支持代码风格检查和格式化
  9. Unit Testing：支持单元测试
  10. E2E Testing： 支持 E2E 测试

4. 选择 Vue 版本

image

这里我选择：3.x

安装的 vue-cli 将会是基于 vue3.x 版本

5. 是否使用 class 风格的组件语法

如果在项目中想要保持使用 TypeScript 的 class 风格的话，建议大家选择y。

image

这里我选择：y

6. 是否使用 Babel 与 TypeScript 一起用于自动检测的填充

image

这里我选择：y

7. 是否使用 history 路由模式

image

这里我选择：y

8. 选择CSS预处理器

image

Sass/SCSS分两种：

  • node-sass：是用 node(调用 cpp 编写的 libsass)来编译 sass，是自动编译实时的
  • dart-sass：是用 drat VM 来编译 sass，需要保存后才会生效

这里我选择：Sass/SCSS（with node-sass）

9. 选择 eslint 配置

image
  1. ESLint with error prevention only：只进行报错提醒；
  2. ESLint + Airbnb config：Airbnb配置，不严谨模式；
  3. ESLint + Standard config：标准配置，正常模式；
  4. ESLint + Prettier：严格模式；
  5. TSlint：typescript格式验证工具

这里我选择：ESLint with error prevention only

10. 选择什么时候执行 eslint 校验

image
  • Lint on save：保存时检查
  • Lint and fix on commit：提交时检查

这里我选择：Lint on save

11. 选择配置文件存放的位置

image
  • In dedicated config files：在专用的配置文件中单独存放
  • In package.json：存放在 package.json 中

这里我选择：In dedicated config files

12. 是否保存之前的配置项

image

这里我选择：N

13. 等待下载依赖模块

image

14. 装好后，进入目录，启动

image

cd my-project ( 进入项目根目录 )
yarn serve ( 启动项目 )

image

项目目录

现在的目录是 Vue3.x 的 cli 看上去简洁多了，去掉了 Vue2.x 中 build 和 config 等目录

image

项目配置

在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // 部署生产环境和开发环境下的URL
    outputDir: 'dist', // 构建输出目录(npm run build 或 yarn build 时 ，生成文件的目录名称)
    assetsDir: 'assets', // 用于放置生成的静态资源(js、css、img、fonts)的;（项目打包之后，静态资源会放在这个文件夹下）
    lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error'
    runtimeCompiler: false, // 是否使用包含运行时编译器的Vue核心的构建
    transpileDependencies: [], // 默认情况下 babel-loader 忽略其中的所有文件 node_modules,这里可增加例外的依赖包名
    productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    filenameHashing: false, //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    css: { // 配置高于chainWebpack中关于 css loader 的配置
        modules: false, // 是否开启支持 foo.module.css 样式
        extract: true, // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用