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访问接口就可以了。
