Vue入门系列 之 Vue项目开发环境搭建

集成开发环境

使用：Visual Studio Code

安装VS Code插件：

插件	截图	功能
Vue 3 Snippets		Vue语法提示等
Vetur		vue文件语法高亮等
open in browser
Live Server

开发工具

Node

查看我使用的版本，命令行输入：node -v，结果：v14.17.3 

NPM

查看我使用的版本，命令行输入：npm -v，结果：6.14.13 

使用NPM默认镜像安装包太慢，可以设置镜像如下：
     npm config set registry https://registry.npm.taobao.org

Vue浏览器插件Vue Devtools

插件官方说明：​​​​​安装 | Vue.js

GitHub：https://github.com/vuejs/devtools#vue-devtools

Chrome浏览器安装插件的方式：
1）可以“科学上网”，通过Chrome应用商店安装。

2）通过GitHub下载源码自行打包，或者下载release包。

 在github发现一个打包好的版本，下载后可以直接解压安装到Chrome。

安装后效果

Vue安装

Vue官方安装方式说明：安装 | Vue.js

使用npm安装Vue

安装Vue 2.x：npm install vue@2 
安装Vue 3.x：npm install vue@3
卸载Vue：npm uninstall vue --save

第一个Vue示例

准备工作

1）新建项目文件夹，并初始化项目
     npm init -y

2）使用npm安装Vue
     npm install vue@2

代码示例

运行结果： 

Vue Cli

使用npm安装Vue Cli

官方教程：安装 | Vue CLI

全局安装Vue Cli：npm install -g @vue/cli

Vue官方推荐使用Vue Cli（脚手架）来快速搭建工程项目。下节学习使用cli搭建第一个项目。