vite构建项目

• 初始化项目

cnpm i create-vite-app      # 安装vite
npm init vite-app vue03     # 使用vite创建vue项目
cd vue03
npm install
npm run dev

• 整合element-plus

• 官网

• 安装

npm install element-plus --save      

• 安装成功后，将package.json中依赖改为如下，否则element-plus使用时会报错

"dependencies": {
    "element-plus": "latest"
  },

• main.js中将element-plus注册为vue的组件

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

const app =  createApp(App)
app.use(ElementPlus)
app.mount('#app')

• 优化
• 新建global.css，在main.js中导入

// 全局样式
import './static/css/global.css'

• 安装less、less-loader，必须安装到package.json的开发依赖中，否则会报错

npm install less
npm install less-loader@5.0.0

• 文件检查，安装依赖

cnpm install -D eslint eslint-plugin-vue

• 根目录下创建 .eslintrc.js

module.exports = {
    extends: [
      "plugin:vue/vue3-recommended",
      "prettier",
      "prettier/vue",
    ],
    rules: {
      'vue/no-unused-vars': 'error',
      "vue/no-multiple-template-root": "off",
    },
  };

• 整合ts

• 安装

cnpm install typescript -D     

# 初始化一个ts编译器的配置文件
npx tsc --init 

• 项目根目录添加shim.d.ts文件

declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

• 在组件中测试

<script setup lang="ts">
class Person{
  name = '孙悟空';
  age = 18;
  sayHello(){
    console.log("Hello 大家好！")
  }
}
//new 一个实例
const per = new Person();
console.log(per.name);
</script>

• 整合router
• 安装router依赖

cnpm install vue-router@next --save 

• view文件夹下新建子组件

• router/index.js中配置路由规则

import {createRouter, createWebHashHistory} from 'vue-router';
// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import welcome from "../view/welcome.vue";
const routes = [
    {path: "/", redirect: '/welcome'},
    { path: "/welcome", component: welcome },
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
    // 指定路由的模式,此处使用的是hash模式
    history: createWebHashHistory(),
    routes // short for `routes: routes`
})

• 路由出口

<!-- 工作区 -->
<el-main>
<router-view></router-view>
</el-main> 

• main.js中router作为vue实例的属性

import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

• 访问根路径http://localhost:8080时重定向到欢迎页面

• 新建一个welcome.vue,router/index.js中引入子组件welcome.vue，配置路由规则

• 点击侧边栏子节点时，路由自动发生改变，且跳转到不同的子组件

<!-- 1. App.vue中开启侧边栏路由 -->
<el-menu router>
<!-- 2. 子节点中设置path -->
<el-menu-item :index="'/userList'">
<!-- 3. 新建子组件，如userList.vue等，并在router中配置路由规则 -->

• 整合axios

• 安装axios 和 qs

cnpm install axios -S
cnpm install qs  -S

• 创建/static/js/axios.js -> 链接

• main.js中引入axios，并注册为vue实例的属性

import axios from './static/js/axios';
const app = createApp(App);
//全局配置
app.config.globalProperties.$http=axios;

• bookList.vue 中测试

<script>
export default {
  data() {
    return {
      books: []
    }
  },
  created(){
    this.$http.get("book/findAll/3/4").then(res => {
      console.log(res.content)
      this.books =  res.content;
    }).catch(err => {
      console.log(err)
    })

  }
}
</script> 

• 整合vuex
• 安装依赖

cnpm install vuex@next

• 创建store

import { createStore } from 'vuex'

export default createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit("increment");
    },
  },
});

• main.js中将store挂载到vue实例

// 导入
import store from './store/index'
// 挂载
app.use(store)

• bookList.vue 中测试

<span>vuex使用：{{ $store.state.count }}</span>