美文网首页vue
vue+ts+rxjs+element-ui框架搭建（基于vue

vue+ts+rxjs+element-ui框架搭建（基于vue

作者: 风不会停7 | 来源:发表于2019-01-18 16:18 被阅读94次

1：安装vue-cli 3.0

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

或者

yarn global add @vue/cli    //global 全局安装vue-cli

2：创建项目

a:创建vue-app项目，在项目文件夹打开终端，输入创建命令：

vue create vue-app

b:项目配置


项目配置.png 
default: 默认配置
Manually select features: 手动配置：babel ts 预编译 等等… 【选择这个】
选项.png 
Babel：将ES6编译成ES5
TypeScript：JS超集，主要是类型检查
Router和Vuex，路由和状态管理
Linter/ Formatter：代码检查工具
CSS Pre-processors：css预编译 (稍后会对这里进行配置)
Unit Testing：单元测试，开发过程中前端对代码进行自运行测试

以上配置根据项目需求选择配置即可。
next.png 
这是我的项目配置。
1. Use class-style component syntax?
表示：是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例,
使用装饰器后：export default class Home extends Vue {}

2. Use Babel alongside TypeScript for auto-detected polyfills?
表示：使用Babel与TypeScript一起用于自动检测的填充?

3. Use history mode for router? (Requires proper server setup for index fallback in production)
表示：路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面（单页面）

4. Pick a CSS pre-processor。
使用什么css预编译器？ 我选择的Sass/SCSS

5. Where do you prefer placing config for Babel, PostCSS, ESLint, etc?
vue-cli 一般来讲是将所有的依赖目录放在package.json文件里

6. Save this as a preset for future projects? (y/N) n
是否在以后的项目中使用以上配置？不

下载依赖的工具：使用 yarn，速度快。
到此为止，安装就完成了，可以等待安装成功。

3：安装axios

首先下载axios

yarn add axios

然后在*.vue文件中使用即可。

import axios from 'axios'
...,
getUserInfo() {
    axios.get('xxx/xxx/xxx').then(res => {
        this.tableData = res.data
    })
 }

4：引入vue-rx和rxjs

安装vue-rx的依赖包

yarn add rxjs
yarn add rxjs-compat
yarn add vue-rx

在src/main.js中配置使用rxjs

// 使用vueRx
import VueRx from 'vue-rx';
import Rx from 'rxjs/Rx'

Vue.use(VueRx, Rx);

5： 配置代理

在根目录下创建vue.config.js

module.exports = {
  devServer: {
     host: "localhost",
     port: 8088, // 端口号
     https: false, // https:{type:Boolean}
     open: true, //配置自动启动浏览器
     // proxy: 'http://192.168.x.xxx:8091' // 配置跨域处理,只有一个代理
    proxy: { //多个代理
      '/api': {
        target: 'http://xxx.xxx.x.xxx:8091',   //代理接口
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'    //代理的路径
        }
      },
     "/foo": {
        target: "http://192.168.x.xxx:8095",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
        '^/foo': '/'
    }
    },
    }
  }

重启服务之后在代码中用localhost:8088/api/xxx或者localhost:8088/foo/xxx访问接口就可以了。

相关文章