vue搭建个人网站(怎么创建一个vue项目)

怎么创建一个vue项目?本文着重讲解如何使用vue搭建个人网站。

1. 创建vue工程

打开 Visual Studio Code 开发工具

或通过cmd命令窗口

vue init webpack website

工程界面目录功能结构说明:

vue搭建个人网站(怎么创建一个vue项目)插图1

2. 运行vue项目

cd website

npm run dev

根据控制台输出的访问地址,在浏览器中打开

Your application is running here: http://localhost:8080

vue搭建个人网站(怎么创建一个vue项目)插图3

3. 首页 index.html

工程编译后,首页对应的节点会被动态替换

vue搭建个人网站(怎么创建一个vue项目)插图5

4. 应用主函数程序入口 main.js

vue搭建个人网站(怎么创建一个vue项目)插图7

5. 主页面 App.vue

vue搭建个人网站(怎么创建一个vue项目)插图9

6. 请求路由 router/index.js

vue搭建个人网站(怎么创建一个vue项目)插图11

7. 组件的引入及使用

vue搭建个人网站(怎么创建一个vue项目)插图13

8. 样式文件的引入

在App.vue主页面中引入全局样式后,子页面可以直接引用全局样式

vue搭建个人网站(怎么创建一个vue项目)插图15

子页面限定样式文件的作用域

vue搭建个人网站(怎么创建一个vue项目)插图17

9. vue ajax配置axios

cd 项目根目录,如website,

// 安装axios模块;

npm install axios

// main.js 追加引用配置

import axios from ‘axios’ // 引入axios

Vue.prototype.$http=axios; // 修改Vue的原型属性

vue搭建个人网站(怎么创建一个vue项目)插图19

使用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中

本文《vue搭建个人网站(怎么创建一个vue项目)》来自 建站狂人 投稿,不代表 五星号 立场,如若转载,请注明出处:https://www.45qun.com/97

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注