项目搭建(windows)

先把VueCli升级到最新版本我这里是Vue CLI v4.5.13

使用cmd进入到想要创建项目的目录下

开始创建

vue create 项目名称 然后回车

选择自定义模板

选择项(路由和vuex手动集成)

选择版本3.x

接下来css模板处理选择n

接下来选择y

接下来css预处理器我选择第二项

接下来eslint代码规范格式化选择第四个

接下来选择代码在保存的时候就做eslint校验格式化

接下来eslint是放到单独的文件夹还是package.json文件内配置，我选择第一个单独文件夹配置

接下来选择n

接下来选择npm

接下来项目就在创建了

大概等个几分钟，创建成功

接下来使用vs打开项目 修改跟目录package.json文件里面的启动命令看自己习惯我的是dev

然后终端输入npm run dev启动项目

然后浏览器打开这两个随意一个地址

访问成功

接下来配置一些文件和依赖等等

跟目录创建vue.config.js文件写入配置项

//跟目录创建配置文件
const path = require("path");

module.exports = {
  outputDir: "./build",
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", path.resolve(__dirname, "src"))
      .set("views", "@/views");
  },
};

接下来安装路由 npm install vue-router@next

然后src目录下创建这些文件

然后再router/index.ts写入

import { createRouter, createWebHashHistory } from "vue-router";
import { RouteRecordRaw } from "vue-router";  //这是vue-router路由对象的约束类型

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    redirect: "/main"
  },
  {
    path: "/main",
    component: () => import("@/views/main/main.vue")
  },
  {
    path: "/login",
    component: () => import("@/views/login/login.vue")
  }
];

const router = createRouter({
  routes,
  history: createWebHashHistory()
});

export default router;

然后在main.ts 挂载路由 修改成

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

然后修改app.vue文件

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/login">登录页</router-link>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

就可以实现对应路由页面的切换

接下来安装vuex状态管理 npm install vuex@next

src创建store文件夹里面创建index.ts文件

index.ts文件写入

// vuex
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      name: 'amaozi'
    }
  }
})

export default store

然后在main.ts修改成

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(router).use(store).mount('#app')

然后在app.vue当中加入

    <h2>{{ $store.state.name }}</h2>

页面出现这个说明引入成功

接下来安装elePlus > npm install element-plus

接下来在main.ts引入 (全局引入方式)

import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
//下面这一行挂载
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

然后在app.vue测试一下加上

<el-button>默认按钮</el-button>

接下来安装axios >npm install axios

然后在src创建server文件夹内再创建index.ts文件写入

import axios from 'axios'
import { ElMessage } from 'element-plus'
const service = axios.create({
  timeout: 60000 * 5, //设置请求超时时间
})
// 所有请求拦截
service.interceptors.request.use(
  (config) => {
    //这里做一些token 请求头携带参数之类的操作
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)

// 所有响应拦截
service.interceptors.response.use(
  (response) => {
    // 响应成功的处理
    const res = response.data
    if (res) {
      if (res.code !== 20000 && response.status !== 200) {
        // 弹出消息
        ElMessage({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
        return
      } else {
        // 访问成功返回响应参数
        return response
      }
    }
  },
  (error) => {
    // 响应失败的处理
    ElMessage({
      message: '请求失败',
      type: 'error',
      duration: 3 * 1000
    })
    return "请求失败"
  }
)

export default service

然后在main.ts文件测试一下

//引入和测试
import server from "./service/axios_demo"
server({
  url: "/api",
  method: 'get',
}).then(res => {
  console.log(res)
})

可以看到请求是可以正常发起的

------------到此基本的项目搭建就完成了-----------