1. 創建vue工程
打開 Visual Studio Code 開發工具
或通過cmd命令窗口
vue init webpack website
工程界面目錄功能結構說明：
2. 運行vue項目
cd website
npm run dev
根據控制臺輸出的訪問地址，在瀏覽器中打開
Your Application is running here: http://localhost:8080
3. 首頁 index.html
工程編譯后，首頁對應的節點會被動態替換
4. 應用主函數程序入口 main.js
5. 主頁面 App.vue
6. 請求路由 router/index.js
7. 組件的引入及使用
8. 樣式文件的引入
在App.vue主頁面中引入全局樣式后，子頁面可以直接引用全局樣式
子頁面限定樣式文件的作用域
9. vue ajax配置axIOS
cd 項目根目錄，如website，
// 安裝axios模塊；
npm install axios
// main.js 追加引用配置
import axios from 'axios' // 引入axios
Vue.prototype.$http=axios; // 修改Vue的原型屬性
使用axios 發起請求（示例）：
/*import [命名] from [相對路徑]*/
import footerNav from '../../components/footer.vue';
/*再用components:{ [命名] }局部注冊*/
export default{
components: {
footerNav
},
data(){
return{
isNowPage: true,
showAdd: false,
showEdit: false,
peoples: [{'name':'Jack'},{'name':'Joe'}],
nameValue: '',
newName: '',
editId: 0
}
},
methods: {
add(){
let that = this;
that.showAdd = true;
let baseRequest = {
"appId":13,
"unionId":"ohKVFwEMq5OPct3F5T1gLMBiDBPE",
"param":{"appId":""}
};
that.$http.post("http://192.168.2.135:8080/
xcx-user/api/user/personCenter",
JSON.stringify(baseRequest),
{headers: {'Content-Type': 'application/json'}}
).then(function(res){
console.log(res);
let data = res.data.data;
data.name = data.userId;
that.peoples.push(data);
}).catch(function (error) {
console.log(error);
});
},
addName(){
let v = this.nameValue;
if(v.trim() === ""){
alert("請輸入新增人員姓名")
}else{
let data = {};
data.name = v;
this.peoples.push(data);
this.showAdd = false;
}
},
del(e){
let id = e.target.offsetParent.id;
this.peoples.splice(id,1)
},
edit(e){
let id = e.target.offsetParent.id;
this.showEdit = true;
this.editId = id;
this.newName = this.peoples[id].name
},
cancel(){
this.showEdit = false
},
editName(){
let v = this.newName;
if(v.trim() === ""){
alert("請輸入姓名")
}else{
this.peoples[this.editId].name = this.newName;
this.showEdit = false
}
}
}
}
10. 導入element-ui
cd website
npm install element-ui
依賴包都會下載安裝在項目更目錄下的node_modules中
