搭建第一个简易vue工程 _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主页面中引入全局样式后，子页面可以直接引用全局样式

文章插图
【搭建第一个简易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 = https://www.isolves.com/it/cxkf/kj/2021-08-10/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 = https://www.isolves.com/it/cxkf/kj/2021-08-10/{};
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中