1：安裝vue-cli 3.0
npm install -g @vue/cli //-g： 全局安裝 vue-cli
或者
yarn global add @vue/cli //global 全局安裝vue-cli
2：創(chuàng)建項目
a:創(chuàng)建vue-app項目，在項目文件夾打開終端汪诉，輸入創(chuàng)建命令：
vue create vue-app
b:項目配置
項目配置.png
default: 默認(rèn)配置
Manually select features: 手動配置：babel ts 預(yù)編譯 等等… 【選擇這個】
選項.png
Babel：將ES6編譯成ES5
TypeScript：JS超集，主要是類型檢查
Router和Vuex懦趋，路由和狀態(tài)管理
Linter/ Formatter：代碼檢查工具
CSS Pre-processors：css預(yù)編譯 (稍后會對這里進(jìn)行配置)
Unit Testing：單元測試剃氧，開發(fā)過程中前端對代碼進(jìn)行自運(yùn)行測試
以上配置根據(jù)項目需求選擇配置即可但指。
next.png
這是我的項目配置。
1. Use class-style component syntax?
表示：是否使用Class風(fēng)格裝飾器觉鼻？
即原本是：home = new Vue()創(chuàng)建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 跳轉(zhuǎn)而無須重新加載頁面（單頁面）
4. Pick a CSS pre-processor俊扭。
使用什么css預(yù)編譯器？ 我選擇的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： 配置代理
在根目錄下創(chuàng)建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': '/'
}
},
}
}
重啟服務(wù)之后在代碼中用localhost:8088/api/xxx或者localhost:8088/foo/xxx訪問接口就可以了姐仅。
