搭建第一个简易vue工程
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中
