Vue 学习笔记 (一) -- 初识 VueCli 3

Vue 学习笔记 (一) – 初识 VueCli 3

简介

接触 Vue 已经有一段时间了,之前做项目都是套用自己之前配置好的项目模板,最近突发奇想想要再重新配置一下项目,然而。。。

1
2
3
4
5
6
zengqingdeMacBook-Pro:Vue zengqing$ vue init webpack hello-world

Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.

zengqingdeMacBook-Pro:Vue zengqing$

之前的 vue init 创建命令不能用了有木有,然后想到之前更新了一波脚手架,然后赶紧翻看一下 Vue Cli 官方文档 然后发现画风已经是变成这个样子的了

原来已经升级到了 3.xx 版本的了,那么我们就来学习一下 Vue Cli 3 的新东西吧。

新特性

整理收集了一些 Vue Cli 3 的新特性,总结如下:

  • 使用命令的变化
  • 项目结构变化
  • 项目配置选项的变化
  • 支持更多新功能

以上纯属个人观点,仅供参考。

使用命令的变化

该方面主要体现在创建项目上面,就像刚开始说的那样 vue init webpack hello-world 已经替换为 vue create hello-world

官方文档上说 Vue CLI 2 是被 Vue CLI 3 覆盖的。如果你仍然需要使用旧版本的 vue init 功能还是可以实现的,只需要使用以下命令:

1
2
3
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

具体创建项目命令的介绍会放在下一篇文章再聊,此处仅做介绍

项目结构变化

先上 2.x 版本项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.
├── README.md
├── build
│   ├── build-preview.js
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── preview.env.js
│   └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── router
│   ├── style
│   └── utils
└── static
└── background.mp3

下面是新版本脚手架生成的项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
├── App.vue
├── assets
├── components
├── main.js
├── router.js
└── views

可以看出新版本的脚手架工具生成的项目是极其的简洁了。

  • 移除了配置文件目录,configbuild 文件夹。
  • 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中。
    src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件。

项目配置选项的变化

想必大家都知道在 2.0 版本的时候,要修改项目配置可以在 buildconfig 目录下进行修改,然而在 3.0 中这两个文件夹都已经移除了,那么新版本的配置应该在哪里设置呢?其实也很简单,只需要在项目根目录下新建一个 vue.config.js 文件然后在里面写项目所需配置就可以了。

具体配置方法会在后续文章中给出

支持更多新功能

在新版本的脚手架中创建项目的时候可以看到新增了对 TypeScriptPWA 的支持

更多文章可查看 我的博客

坚持原创技术分享,您的支持将鼓励我继续创作!
分享到: