Home | Vite中文网 (vitejs.cn)

下载vite项目

npm init vite@latest project-name

选项选择：

• vue
• vue-ts

打开项目 并 下载vue-router库

cd project-name


npm install vue-router@next --save

npm install

在src目录下创建 router 文件夹，并创建 index.ts

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

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
        meta: {
            title: '首页'
        }
    }
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

在src目录下创建 views/Home.vue

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue';
</script>

<template>
  <HelloWorld msg="hello word"></HelloWorld>
</template>

在main.ts 加载vue-route

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

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

修改App.vue

<script setup lang="ts">
</script>

<template>
  <div id="app-content">
    <router-view />
  </div>
</template>

<style>
</style>

配置 vite.config.ts 文件

首先执行命令安装这个 path模块：

npm install --save-dev @types/node

然后修改 /vite.config.ts 配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
  import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  alias: {
    '@':path.join(__dirname,'src')
  }
})

扩展

安装使用Pinia

npm install pinia -S

创建 pinia 实例并挂载到 vue中

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

const app = createApp(App);
const pinia = createPinia()// 创建pinia实例
app.use(router);// 注入路由
app.use(pinia);// 注入pinia
app.mount('#app');

在src文件下创建一个store文件夹，并添加index.ts

import { defineStore } from 'pinia'

export const mainStore =  defineStore('main',{
    state:()=>{
        return {
            info:"hello world"
        }
    },
    getters:{
        getInfo(suffix = '.'): string{
            return this.info + suffix;
        }
    },
    actions:{
        // 修改info
        setInfo(info_: string){
            this.info = info_;
        }
    }
})
// state 定义状态
// getters 类似于组件的computed，用来封装计算属性，具有缓存的功能
// actions 状态操作 同步异步都支持

AntDesign安装

npm i --save ant-design-vue

在 main.ts 插入：

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd);// 全局注册Antd

Element-plus安装

npm install element-plus --save

在main.ts 插入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);

app.use(ElementPlus);// 全局注册ElementPlus

由于element这个版本的icon图标不默认在组件中，所以要使用的话还要另外安装:

npm install @element-plus/icons-vue

在 main.ts 插入

import * as Elicons from '@element-plus/icons-vue';

const app = createApp(App);

Object.keys(Elicons).forEach((key) => {
    app.component(key, Elicons[key as keyof typeof Elicons]);
});

js-cookie安装

npm install --save js-cookie

npm install --save @types/js-cookie

使用参考： 创建 utils/cookie.ts

import Cookies from 'js-cookie'
 
// 默认设置
export const TOKEN_KEY = 'NOW_TOKEN'//token的key
export const cookieExpiresDayNumer = 7//cookie默认过期天数
 
// 设置token
export const setToken = (token:string, cookieExpires:any) => {
  Cookies.set(TOKEN_KEY, token, { expires: cookieExpires || cookieExpiresDayNumer })
}

// 获取token
export const getToken = () => {
  const token = Cookies.get(TOKEN_KEY)
  if (token) return token
  else return false
}

// 删除token
export const delToken = () => {
  Cookies.remove(TOKEN_KEY)
}