[JavaScript知识库] 搭建第一个简易vue工程

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 搭建第一个简易vue工程 -> 正文阅读

[JavaScript知识库]搭建第一个简易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-store/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
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }