Vue脚手架

1. 安装Vue CLI

• 参考https://cli.vuejs.org/zh/guide/installation.html

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

• 参考https://router.vuejs.org/zh/installation.html

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

• 参考https://vuex.vuejs.org/zh/index.html

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

• 参考http://axios-js.com/zh-cn/docs/

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

• 参考https://element-plus.gitee.io/zh-CN/guide/installation.html#使用包管理器

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'
  }

• 具体可以参考https://cli.vuejs.org/zh/config/#devserver-proxy

• 再修改api目录下的index.js中的baseURL为http://localhost:80/

• 启动服务，然后访问http://localhost:80/

• 查看user接口，可以正常返回，没有跨域问题