Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

Vite创建项目

npm init vite@latest

安装依赖

npm i vue-router@4 # 安装router
npm i axios -S # axios
npm install @element-plus/icons-vue # element-plus的图标库
npm install element-plus --save # element-plus
npm i vuex@next # vuex
npm install @types/node -D

配置路由（router）

• vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// @ts-ignore 
//隐藏.ts 文件中的错误
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  /* 配置扩展名及@别名 */
  resolve: {
    extensions: ['.js', '.ts', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },

  /* 配置开发环境端口号及跨域处理 */
  // server: {
  //   port: 3333,
  //   proxy: { '/^api': '在这里输入接口的baseURL' }
  // }
})

• /src/router/index.ts

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'

const routes : Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: ()=>import('../views/home/index.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

• /src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

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

配置Element-Plus

• /src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'

const app = createApp(App)
for (const icname in ElIcons){
    // @ts-ignore
    app.component(icname,ElIcons[icname])
}
app.use(router)
app.use(ElementPlus)
app.mount('#app')

配置Axios

• /src/request/request.ts

import axios from 'axios'

const request = axios.create({
    baseURL: 'http://localhost:8081',
    timeout: 10000
})

// request 拦截器
request.interceptors.request.use(config => {
    // @ts-ignore
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // let usertoken = localStorage.getItem("token")?JSON.parse(localStorage.getItem("token")):null

    // let usertoken = localStorage.getItem("token")
    //
    // config.headers['token'] = usertoken;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        // console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

• /src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'
import request from "./request/request";

const app = createApp(App)
for (const icname in ElIcons){
    // @ts-ignore
    app.component(icname,ElIcons[icname])
}
app.config.globalProperties.$http = request
app.use(router)
app.use(ElementPlus)
app.mount('#app')

配置vuex

• /src/request/request.ts

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

• /src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'
import store from './store/index'
import request from "./request/request";

const app = createApp(App)
for (const icname in ElIcons){
    // @ts-ignore
    app.component(icname,ElIcons[icname])
}
app.config.globalProperties.$http = request
app.use(router)
app.use(store)
app.use(ElementPlus)
app.mount('#app')

安装scss/sass

npm install node-sass sass-loader sass -D

完整配置

• /src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'
import store from './store/index'
import request from "./request/request";

const app = createApp(App)
for (const icname in ElIcons){
    // @ts-ignore
    app.component(icname,ElIcons[icname])
}
app.config.globalProperties.$http = request
app.use(router)
app.use(store)
app.use(ElementPlus)
app.mount('#app')

• vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// @ts-ignore
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  /* 配置扩展名及@别名 */
  resolve: {
    extensions: ['.js', '.ts', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },

  /* 配置开发环境端口号及跨域处理 */
  // server: {
  //   port: 3333,
  //   proxy: { '/^api': '在这里输入接口的baseURL' }
  // }
})