vue 开发常用工具及配置一

LIYI

发布于 2020-02-11 15:40:15

1.2K0

发布于 2020-02-11 15:40:15

文章被收录于专栏：艺述论专栏

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
# OR
yarn 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'
        }
      }
    }
  }
};

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串。它会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://127.0.0.1:8010。

pathRewrite 在这里理解成：用‘/api’代替target里面的地址。例如在调用接口时，接口地址是'http://127.0.0.1:8010/user/add'，直接写 ‘/api/user/add’ 即可。

关于 router 的配置，当请求的 head的 host 为dev.localhost:3000时，转到http://localhost:8000'。

5，vue-devtools

这是专门针对 vue 组件开发的 chrome 开发者工具插件。可以查看整个页面的 vue 组件树和每个组件的 data，并且可以动态的更改 data，然后会更新 UI 到应用上。