1. 安装Vue CLI
yarn global add @vue/cli
- 检查版本
vue --version
2. 创建一个项目
- 在一个文件夹下打开cmd,然后使用下面的命令创建hello-world项目
vue create hello-world
- 然后出现下面的页面
- 选择vue3回车
- 选择Yarn下载
- 下载成功
3. 启动项目
- 执行下面的命令
cd hello-world
yarn serve
- 启动成功,访问
http://localhost:8080/
4. 相关插件
ESLint 语法纠错
JavaScript (ES6) code snippets es6语法智能提示及快捷输入(同时支持ts,html,vue)
HTML CSS Support 让html上写class智能提示当前项目所支持的样式
vetur 语法高亮,智能感知
vue 3 snippets vue代码智能提示,自动补全
open in browser 打开html页面
live server
Vue Language Features (Volar) vue3官方推荐使用
5. 配置vue-router
yarn add vue-router@4
- 创建router目录
import { createRouter, createWebHistory } from "vue-router";
/**
* 定义路由信息
*/
const routes = []
// 创建路由实例并传递routers配置
// 使用h5的路由模式,url中不带有#,部署项目时候需要注意
const router = createRouter({
history: createWebHistory(),
routes
})
// 全局的路由守卫
router.beforeEach((to, from) => {
console.log(to)
console.log(from)
return true
})
export default router
- 全局引入
import router from './router';
createApp(App).use(router).mount('#app')
6. 配置vuex
yarn add vuex@next --save
- 创建目录结构
store/modules
-user.js
const user = {
state: {},
getters: {},
mutations: {},
actions: {}
}
export default user
- index.js
import { createStore } from "vuex"
import user from "@/store/modules/user"
import actions from "@/store/actions"
import mutations from "@/store/mutations"
const store = createStore({
modules: {
user
},
actions,
mutations
})
export default store
- 其他几个文件先空着
- 全局引入
import store from './store';
createApp(App).use(store).mount('#app')
7. 配置axios
yarn add axios
- 新建index.js,定义全局的axios配置
import axios from "axios";
// 创建axios实例
const request = axios.create({
// axios中请求配置baseURL,表示请求url公共部分
baseURL: 'http://localhost:8080/',
// 超时时间
timeout: 1000,
// 设置content-type
headers: { 'Content-Type': 'application/json;charset=ut-8' }
})
export default request
- 随便写几个接口
import request from '@/api';
// 查询用户列表
export function listUser(data) {
return request({
url: '/user',
method: 'get',
params: data
})
}
// 新增用户
export function addUser(data) {
return request({
url: '/user',
method: 'post',
params: data
})
}
- 启动服务
- 访问
http://localhost:8080/
8. 配置element-plus
yarn add element-plus
- 全局引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')
- 引入一个button
<el-button type="primary">Primary</el-button>
- 启动项目
- 说明配置成功
9. 跨域问题
- 这里先使用springboot写一个接口
http://localhost:8080/user
- 在
vue.config.js
中,添加如下配置,将服务的80端口代理到http://localhost:8080
上去,比如访问http://localhost:80/user
实际上是访问了http://localhost:8080/user
devServer: {
port: 80,
proxy: 'http://localhost:8080'
}
- 再修改api目录下的index.js中的baseURL为
http://localhost:80/
- 启动服务,然后访问
http://localhost:80/
- 查看user接口,可以正常返回,没有跨域问题