Vue开发环境

目录

一、Visual Studio Code编辑器

1.下载地址

2.Visual Studio Code编辑器特点

二、Vue的下载和引入

1.三种方式

2.补充：npm

三、Chrome浏览器和vue-devtools扩展

1.vue-devtools的基本概念

2.vue-devtools安装包的安装步骤：

四、webpack打包工具

1.webpack的基本概念：

2.安装webpack

---

一、Visual Studio Code编辑器

1.下载地址

Download Visual Studio Code - Mac, Linux, Windows

2.Visual Studio Code编辑器特点

（1）轻巧极速，占用系统资源较少

（2）具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能

（3）跨平台

（4）主题界面的设计比较人性化

（5）提供了丰富的插件

二、Vue的下载和引入

1.三种方式

方法一，从官网上下载Vue.js - 渐进式 JavaScript 框架 | Vue.js

方法二，直接使用内容分发系统引入Vue.js,比如，https://www.bootcdn.cn/

方法三，使用安装node.js后使用npm安装Vue.js框架

2.补充：npm

npm基本概念：

        npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题。

使用场景需求：

        从npm服务器下载别人编写的第三方包到本地使用。 从npm服务器下载并安装别人编写的命令程序到本地使用。 将自己编写的包或命令行程序上传到npm服务器供别人使用。

常用命令：

npm install：安装项目所需要的全部包，需要配置package.json文件。

npm uninstall：卸载指定名称的包。

npm install 包名：安装指定名称的包。

npm update：更新指定名称的包。

npm start：项目启动。

npm run build：项目构建。

三、Chrome浏览器和vue-devtools扩展

1.vue-devtools的基本概念

        vue-devtools：vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用，只需下载官方压缩包，配置Chrome浏览器的扩展程序即可使用。  

2.vue-devtools安装包的安装步骤：

①下载vue-devtools-5.1.1.zip压缩包到本地。

②解压好的vue-devtools-5.1.1目录，安装依赖。

③构建vue-devtools工具插件。

四、webpack打包工具

1.webpack的基本概念：

        webpack是一个模块打包工具，可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起，实现自动化构建，给前端开发人员带来了极大的便利。

网址：webpack | webpack中文文档 | webpack中文网

2.安装webpack

webpack的安装以及卸载，以及查看webpack版本：

安装webpack：npm install webpack@4.27.x -g

查看webpack版本：webpack -v

卸载webpack：npm uninstall webpack -g

注：旧版本的webpack还需要安装webpack-cli脚手架工具，而最新版本的webpack打包工具已经集成了脚手架工具。