Vue項目開發流程(自用)
阿新 • • 發佈：2019-03-11
目錄 mage set 持續更新 請求 靜態資源 clas test 組件目錄
一、配置開發環境
1.1 安裝Node.js
npm集成在Node中，檢查是否安裝完成：node -v
1.2 安裝cnpm(淘寶鏡像)
npm install -g cnpm，檢查安裝是否完成：cnpm -v
1.3 安裝Vue腳手架
cnpm install -g vue-cli
1.4 項目初始化
vue init webpack vue-project
二、明確目錄結構
├── README.md 項目介紹 ├── index.html 入口頁面 ├── build 構建腳本目錄 │ ├── build-server.js 運行本地構建服務器，可以訪問構建後的頁面 │ ├── build.js 生產環境構建腳本 │ ├── dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新 │ ├── dev-server.js 運行本地開發服務器 │ ├── utils.js 構建相關工具方法 │ ├── webpack.base.conf.js wabpack基礎配置 │ ├── webpack.dev.conf.js wabpack開發環境配置 │ └── webpack.prod.conf.js wabpack生產環境配置 ├── config 項目配置 │ ├── dev.env.js 開發環境變量 │ ├── index.js 項目配置文件 │ ├── prod.env.js 生產環境變量 │ └── test.env.js 測試環境變量 ├── mock mock數據目錄 │ └── hello.js ├── package.json npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息 ├── src 源碼目錄 │ ├── main.js 入口js文件 │ ├── app.vue 根組件 │ ├── components 公共組件目錄 │ │ └── title.vue │ ├── assets 資源目錄，這裏的資源會被wabpack構建 │ │ └── images │ │ └── logo.png │ ├── router 前端路由 │ │ └── index.js │ └── views 頁面目錄(新建文件夾) │ ├── components 頁面組件 │ ├── hello.vue 頁面 │ └── notfound.vue ├── static 純靜態資源，不會被wabpack構建。 └── test 測試文件目錄（unit&e2e） └── unit 單元測試 ├── index.js 入口腳本 ├── karma.conf.js karma配置文件 └── specs 單測case目錄 └── Hello.spec.js
三、安裝依賴(根據項目所需補充)
3.1 在組件中使用less
安裝：cnpm i --save-dev less less-loader style-loader
3.2 使用方式：
<stylelang="less" scoped>
//外部導入(也可以直接編寫less)
@import url("../assets/less/index.less");
</style>
四、引入插件(以bootstrap為例)
4.1 直接在入口頁面index.html中引入，文件存放在static靜態資源文件夾(避免了jquery和bootstrap文件引入先後問題)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"content="width=device-width,initial-scale=1.0"> <script src="./static/js/jquery.min.js"></script> <script src="./static/js/bootstrap.min.js"></script> <link rel="stylesheet" href="./static/css/bootstrap.min.css"> <title>vue實例</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
五、使用axios獲取數據
5.1 安裝axios
cnpm i --save-dev axios
5.2 配置config/index.js(可以解決跨域問題)
proxyTable: {
‘/api‘: {
target: ‘https://api.douban.com‘,//設置你調用的接口域名和端口號
changeOrigin: true,
pathRewrite: {
‘^/api‘: ‘‘//這裏理解成用‘/api’代替target裏面的地址，後面組件中我們掉接口時直接用api代替 比如我要調用‘https://api.douban.com/user/add‘，直接寫‘/api/user/add’即可
}
}
}
5.3 調用
5.3.1 在需要使用http請求的頁面導入
import axios from ‘axios‘
5.3.2 get請求：
export default {
name: "index",
data() {
return {
info: null
};
},
methods: {
getData() {
axios
.get("/api/v2/movie/in_theaters")
.then(res=> {
this.info = res.data;
})
.catch(err=> {
console.log(err);
});
}
}
};
5.3.3 post請求(示例，找不到post開放接口)：
export default {
name: "index",
props: [],
data() {
return {
info: null
};
},
methods: {
getData() {
axios
.post("/api/v2/movie/in_theaters",{
params: {//傳參
page: 1,
count: 20
}
})
.then(res=> {
this.info = res.data;
})
.catch(err=> {
console.log(err);
});
}
}
};
六、Vue文件導入
配置build/webpack.base.conf.js,添加匹配規則：
{
test: /\.vue$/,
loader: ‘vue-loader‘,
options: vueLoaderConfig
}
持續更新。。。。。
Vue項目開發流程(自用)