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

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

2. 创建项目

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

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

3. 选择配置

选择自己所要集成的配置(格键是选中与取消,A键是全选,回车确定)
这里我的选择如下:



配置项:

  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 版本


这里我选择:3.x

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


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

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


这里我选择:y


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

这里我选择:y


7. 是否使用 history 路由模式


这里我选择:y


8. 选择CSS预处理器


Sass/SCSS分两种:

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

这里我选择:Sass/SCSS(with node-sass)


9. 选择 eslint 配置

  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 校验

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

这里我选择:Lint on save


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

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

这里我选择:In dedicated config files


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


这里我选择:N


13. 等待下载依赖模块


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

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


项目目录

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



项目配置

在项目的根目录下新建 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,采用独立样式文件载入,不采用