前言

⭐️ 本专栏主要内容为「 Vue3官方文档」的学习过程 ✍🏼

⭐️ 本专栏适合人群：Vue小白、学完一遍Vue的掘友 👨🏼‍💻

⭐️ 本专栏的阅读顺序和官方文档顺序相同 📖

⭐️ 英雄不问出处，这个专栏一定让你收获满满 🥳！

⭐️ 静心，思考，实操，坚持，巩固，满载而归 🥰！

⭐️ 欢迎各位掘友在评论区交流 🤡

本节内容

安装Vue Devtools
安装Vue
- CDN引入Vue
- NPM安装Vue
- 命令行工具（CLI）安装Vue
- Vite安装Vue
不同构建版本

Vue Devtools安装

Vue Devtools是在浏览器中能便捷地调试Vue应用。

下面的示例是对 Chrome 安装 Vue Devtools 工具 Github ⎋

将vuejs/devtools的文件clone下来

git clone https://github.com/vuejs/devtools.git

克隆下来后，安装依赖包

yarn install

找到vue-devtools/packages/shell-chrome中的manifest.json，将persistent的false改为true

"background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
  },

然后在vue-devtools路径下build

vue-devtools % yarn run build

构建结束后，打开Chrome - 更多工具 - 扩展程序，点击加载已解压的扩展程序，选择vue-devtools/package/shell-chrome

安装成功

安装Vue

CDN引入Vue

在HTML文件中添加

<script src="https://unpkg.com/vue@next"></script>

专栏同步代码中vue3-install/cdn-install路径下CDNLoad.html运行，

输出下Vue，成功引入。

代码如下：

<html>
  <head>
    <title>CDN-install-vue</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <h1>VUE CDN Loading</h1>
    
    <script>
    	console.log('Vue', Vue)
    </script>
  </body>
</html>

在生产环境下，官方推荐使用一个明确的版本号和构建文件，避免新版本造成的不可预期的破坏

npm安装Vue

$ npm install vue@next

vue也提供了编写单文件组件的配套工具，单文件的意思就是*.vue文件，也叫SFC。

$ npm install -D @vue/compile-sfc

命令行工具（CLI）安装Vue

Vue-CLI是为单页面应用快速搭建繁杂的脚手架。带有热重载、保存时Lint校验，以及生产环境可用的构建版本

1. 安装Vue-CLI

npm install -g @vue/cli
# 或
yarn global add @vue/cli

2. 创建Vue项目

vue create <project-name>

第一个是vue3默认项目

第二个是vue2默认项目

第三个是更多选择

3. 进入更多选择

检查项目所需的功能：空格表示选择；a 表示全选；i 表示反转选择；回车表示继续

Babel

Babel是JavaScript编译器，他可以将我们写ES6文件转换成ES5，因为有的浏览器版本不支持ES6，通过Babel输出浏览器兼容的JavaScript 代码
TypeScript

JavaScript的超集，进行类型检查
PWA Support

渐进式Web应用
Router

路由
Vuex

状态管理器
CSS Pre-processors

CSS 预编译
Linter / Formatter

代码检查工具
Unit Testing

单元测试
E2E Testing

端到端测试

根据自己的需求来选择需要的选项

4. 选择Vue的版本

5. 是否使用Babel做转译？ Yes

6. 使用class风格的组件语法 Yes

7. 路由使用历史模式？

Yes: history http://localhost:8080/index.html

No: hash http://localhost:8080/#/index.html

8. 选择一个CSS预处理器(默认支持PostCSS, Autoprefixer和CSS模块):

9. 选择一个linter / formatter配置:

只进行报错提醒（选这个）
不严谨模式
正常模式
严格模式

10. 选择额外的lint特点

lint on save

代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error

lint and fix on commit（推荐）

代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。

11. 选择单元测试方案

12. 选择端到端测试解决方案

13. 你更喜欢在哪里配置Babel, ESLint等?（推荐第一个）

14. 将此保存为未来项目的预设?

这个选择yes的话，下次在创建项目时会有这个预设

15. 选择安装依赖时要使用的包管理器: 推荐yarn

这样创建好了一个vue项目

Vite安装Vue

Vite ⎋ 是一个Web开发构建工具，闪电般的冷服务器启动。

通过在终端中运行下面命令，可以使用Vite快速构建Vue项目。

npm安装

npm install vite@latest <project-name> -- --template vue

cd <project-name>
npm install
npm run dev

yarn安装

yarn create vite <project-name> --template vue

cd <project-name>
yarn 
yarn dev

成功创建了一个vue项目

不同构建版本

在node_module/vue/dist中的每个文件根据不同的使用情况来选择。

*.prod.js文件用于生产环境

vue.runtime.*有预编译的过程

预编译是做些代码文本的替换工作，vue.runtime.*在构建项目的时候预编译模版，之后只关注运行时。而不带runtime的包含编译器和运行时的构建的版本，动态编译模板。区别是：模版的构建时间点。

CDN并没有构建工具

浏览器中<script src="...">直接使用

vue.global.js		
vue.global.prod.js	
vue.runtime.global.js
vue.runtime.global.prod.js

使用原生ES模块导入<script type="module" >

vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js		
vue.runtime.esm-browser.prod.js

服务端渲染

vue.cjs.js				
vue.cjs.prod.js

使用构建工具

vue.runtime.esm-bundler.js	// 使用构建工具

用于webpack、vite、rollup和parcel等构建工具

我们可以在浏览器的开发者调试工具中源代码下，当前应用的node_modules中vue/dist目录下，就可以知道，代码使用vue的哪个构建版本构建的了。

第一弹Over！本弹主要讲了Vue Devtools的安装、Vue的引入、脚手架的创建，不同版本的构建工具。收获到Vue项目调试工具、如何引入Vue和创建一个Vue项目，并了解vue/dist很多的构建版本。

结语

专栏同步代码：Github ⎋

掘金社区：跟我一起学Vue3

作者简介：

一个满脑子奇怪知识的小商同学，在校ing，懂点设计，懂点排版，为成为一名优秀的前端工程师而努力。

跟我一起学Vue3——Vue安装

前言