vue 开发常用工具及配置一

1，NodeJS
2，Vue CLI
3，Vue UI
4，后台接口反向代理
5，vue-devtools

1，NodeJS

访问 nodejs.org 下载。这是必不可缺的环境之一。下载最新的 LTS 版本。LTS 代表长期维护，通常比较稳定。

2，Vue CLI

vue-cli 是从头搭建 vue 工程的脚手架工具，通过该工具，可以简化工程环境的配置。vue-cli 的官网地址为： cli.vuejs.org/zh/ 。

使用命令安装：

npm install -g @vue/cli# ORyarn global add @vue/cli

安装后检查版本：

vue -V

最新版本在 3 以上：3.3.0

安装 VUE CLI 之后，就可以使用create指令创建项目了：

vue create hello-world

除了命令行创建，还可以使用 VUE UI 创建。

如上所示，在创建过程中，涉及到这些工程特性：

Babel，必选，用于将编写的ES6代码编译成浏览器能识别的JavaScript代码，是核心组件包
Typescript，微软开发的JS的强类型版本，通过Babel能够编译成JavaScript，可选
PWA，Progressive web apps，渐进式Web 应用，一般不选
Router，路由组件，用于页面跳转，多页面程序必选，单页面不选
Vuex，存储框架，看复杂度，建议选用
CSS Pre-processors，CSS预处理工具，支持SASS，LESS 等预编译语言，最终将这些内容处理成 css，必选。element-ui和bootstrap等框架都选择了 sass，可以选择sass，也可以选择 less。
Linter / Formatter，代码规范检查工具，可选
Unit Testing，单元测试框架可选
E2E Testing，端对端测试框架，用于支持自动化测试，可选

项目创建完成后，了解一下项目目录结构：

node_modules，本地依赖包的存放所在，所有npm install --save-dev所安装的包，都在该目录下
public，该目录存储了所有静态文件，如html文件模板，公共css文件，小图片等
src，源码所在
babel.config.js，babel的配置文件
package.json，顶重要的webpack工程化配置文件

运行测试：

npm run serve

运行效果：

3，Vue UI

这是一个在浏览器里代替使用命令行管理 vue 项目的工具，内嵌于 VUE CLI 3 内提供。功能主要有：创建项目、配置项目预装选项、安装与移除插件、配置项目、执行项目任务（serve、build等）。

这个工具可以用，可以不用，适合初学者。详细介绍见：

https://zhuanlan.zhihu.com/p/39390139

4，后台接口反向代理

在vue开发中，前端界面和后台服务分离，为了便于调试，通常在本地环境中设置反向代理，连接到后台接口服务。在工程根目录下新建vue.config.js文件，内容如下：

module.exports = {  devServer: {    port: 8090,    proxy: {      "/api": {        secure: false,        target: 'http://127.0.0.1:8010',//设置你调用的接口域名和端口号 别忘了加http        changeOrigin: true,        pathRewrite: {          "^/api": "/"         },        cookiePathRewrite:{          '/':'/',          '/nfcm':'/api'        },        router: {          'dev.localhost:3000': 'http://localhost:8000'        }      }    }  }};