14-vue项目搭建.md

使用 Vue 脚手架

初始化脚手架

\1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。

\2. 最新的版本是 4.x。

\3. 文档: https://cli.vuejs.org/zh/。

具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli
1

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx
1

第三步：启动项目

npm run serve
1

备注：

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

├── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json：包版本控制文件

vue跨域处理

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:9001",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
        disableHostCheck: true
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

安装element-ui

npm i element-ui

/**
 * element-ui   main.js
 */
//全局导入组件
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
//使用element插件
Vue.use(ElementUI);
1
2
3
4
5
6
7
8
9
10

安装axios

npm i axios

npm i vue-axios





/**
 * axios			main.js 
 * vue-axios
 */
//axios组件，发送请求组件
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

requet.js

import Axios from "axios";
const instance = Axios.create({
    baseURL: '/api',
    timeout: 3000,
    withCredentials: true //default
})

export default instance;
1
2
3
4
5
6
7
8

login.js

import request from "../request";

//后台用户登录
//这里指定使用login
export const login = (data)=>{
    return request({
        url: "/api/v1/auth/login",
        method: "post",
        data: data,
    })
}

export const logout = (data)=>{
    return request({
        url: "/api/v1/auth/logout",
        method: "post",
        data: data,
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

App.vue

1
2
3
4
5

安装less 以及 less-loader

"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
1
2
3

启动项目测试

npm run serve
1