vue全家桶进阶之路6：Vue的开发工具、安装以及js引入

1、安装

　　注意：Vue 不支持 IE8 及以下版本

　　创建一个文件夹用于下载引入Vue

　　D:\BaiduSyncdisk\vue2

　　按照最新版本的Vue

　　npm install vue

　　创建完成后便可以在node_modules\vue\dist查看Vue的js文件：D:\BaiduSyncdisk\vue1\node_modules\vue\dist

2、引入

　　下载js文件本地引入　　　　

　　即：从官网下载js文件，然后在程序中引用路径，一般情况下，项目会有一个专门的文件夹存放js文件，所以Vue的js文件也存放至此即可。　

　　开发模式：https://v2.cn.vuejs.org/js/vue.js

　　生产模式：　https://v2.cn.vuejs.org/js/vue.min.js

　　引用方式：

vue2
<script src="js/vue.js"></script>
vue3
<script src="js/vue.global.js"></script>

　　通过CDN使用Vue

　　这是一种很方便的Vue使用方法，和很多JavaScript组件的引用方式相同，直接在代码中引入

vue2
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>

vue3
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

安装CLI脚手架

　　　　　　npm install -g @vue/cli

npm install vue -g 安装vue.js
npm install webpack -g 安装webpack模板
npm install --global webpack-cli 安装webpack-cli
npm install -g vue-cli 安装vue-cli

使用webpack -v 和 vue -V 检查是否安装成功（注意vue -V 大写）

　　　　下载地址：https://cli.vuejs.org/zh/

　　官方文档说明

npm install -g @vue/cli # 原生npm的下载速度太慢，各种报错。因此，使用淘宝镜像来安装
npm install -g @vue/cli --registry=https://registry.npm.taobao.org 
# OR
yarn global add @vue/cli

　　安装完成

D:\vue3\st02>vue -V
@vue/cli 5.0.8
创建项目：

vue create 项目名称
例如：vue create my-project
运行项目：
首相用开发工具打开项目
然后运行：

npm run serve

3、VScode的vue安装

VScode下载：
https://code.visualstudio.com/

在VScode中安装以下插件来辅助我们开发Vue 3项目：

（1）Chinese (Simplified)（简体中文）Language Pack for Visual Studio Code：VScode默认是英文语言环境，安装这个插件可以将VScode界面变成中文语言环境，方便中文开发者使用VScode。

（2）Vue Language Features (Volar)：也许有人熟悉Vetur，它是Vue 2.x的配套插件，主要用于对Vue单文件组件提供语法高亮、语法支持以及语法检测。它还内置了Emmet插件的所有功能，支持快捷输入代码，但它不支持Vue 3的很多新特性，如Vue 3不再需要根标签，继续使用Vetur，在单页应用中不写根标签时Vetur会报错，所以完美支持Vue 3的插件Volar出世，它在功能上与Vetur一致。如果同时安装了Vetur和Volar，使用Volar时建议禁用Vetur。