一、创建nodejs环境，官方下载安装即可。
二、安装相关工具，如cnpm、pnpm、yarn，方便后续安装。
三、创建项目：myvitets 是项目目录
yarn create vite myvitets vite-vue3-starter --template vue-ts
四、安装element-plus
yarn add element-plus --save
五、安装自动导入插件
yarn add -D unplugin-vue-components unplugin-auto-import vite-plugin-style-import url consola
六、修改vite.config.ts为下面的：
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
base: '/login/',
server: {
host: '0.0.0.0',
https: false,
port: 4000, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true, // 允许跨域
proxy: {
'/suoker': {
target: 'http://localhost:8899',
rewrite: (path) => path.replace(/^\/sr/, ''),
changeOrigin: true, //是否跨域
},
'/asp': {
target: 'http://localhost:1100/api/',
rewrite: (path) => path.replace(/^\/asp/, ''),
changeOrigin: true, //是否跨域
},
}
},
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [ElementPlusResolver()],
eslintrc: {
enabled: true
}
}),
Components({
directoryAsNamespace: true,
resolvers: [ElementPlusResolver()]
}),
createStyleImportPlugin({
resolves: [ElementPlusResolve()]
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
rollupOptions: {
output: {
// 分包
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
}
}
}
})
七、修改tsconfig.json，主要是增加了include中设置与第6步匹配，顺便增加了path设置@对应src及lib中选项。
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": [
"ES6",
"dom",
"es5",
"es2015.promise",
"es2015",
"es2017"
],
"skipLibCheck": true,
"noEmit": true,
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"components.d.ts",
"auto-imports.d.ts",
"typings/**/*.d.ts"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}八、修改tsconfig.node.json，将"target": "ESNext"修改成"target": "ES2016"，防止vite.config.ts在vscode报红出现： 【属性“includes”在类型“string”上不存在。是否需要更改目标库? 请尝试将 “lib” 编译器选项更改为“es2015”或更高版本。】这个在tsconfig.josn中修改不起作用，只能在此修改才不报红。
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true,
"target": "ES2016"
},
"include": [
"vite.config.ts"
]
}
九、已经可以通过yarn dev运行项目了，如果在compenents下新建了类似HelloWorld.vue的组件，可自动引入到根目录components.d.ts文件（此文件中已经提前自动导入了很多组件）中，然后即可在自己的组件中直接使用而不必引用。
例如/src/compenents/MyTest.vue中内容，直接输入element-plus的el-button而不用Import：
<template>
<el-button type="primary">我的测试</el-button>
</template>
并且在App.vue中也可以直接调用elemnetplus或刚才的MyTest组件，比如可在template中15行直接这样使用组件，注意第3行import前面注释掉完全正常使用组件：
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
// import MyTest from "./components/MyTest.vue";
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<my-test></my-test>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
十、新建一个登录过程记录：
1、安装路由vue-vouter:
yarn add vue-router axios --save
2、新建目录src/router，并在此目录下新建文件index.ts，输入以下内容
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
/*{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},*/
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
},
/*{
path: '/test',
name: 'Test',
component: () => import('../views/Test.vue')
},
{
path: '/:catchAll(.*)',
name: '404',
component: () => import('../views/404.vue')
}*/
]
const router = createRouter({
history: createWebHistory(),// process.env.BASE_URL
routes
})
export default router
有关router使用，参照这里。
3、在src\views目录下新建Login.vue文件，内容（通过ChatGPT3生成的）如下：
<template>
<div>
<h1>登录页面</h1>
<form @submit.prevent="login">
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" required>
<br>
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" required>
<br>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'Login',
setup() {
const username = ref('');
const password = ref('');
const login = () => {
// 验证用户名和密码是否正确，这里模拟一个简单的验证
if (username.value === 'admin' && password.value === '123456') {
alert('登录成功');
// 登录成功后保存用户信息到本地存储
localStorage.setItem('user', JSON.stringify({ username: username.value }));
// 跳转到首页
location.href = '/';
} else {
alert('用户名或密码错误');
}
};
return {
username,
password,
login,
};
},
};
</script>4、因为以上是ChatGPT机器生成的，在vscode中打开src/vouter/index.ts报红提示：【无法找到模块“@/views/Login.vue”的声明文件。“myvitets/src/views/Login.vue.js”隐式拥有 "any" 类型。】解决办法是：
（1）在myvites根目录下新建typings目录，在此目录下新建任意文件，如router.d.ts(形如*.d.ts)，输入以下内容：
declare module '@/views/Login.vue' {
const content: any
export = content
}（2）在tsconfig.json里的 include 添加上（上面的配置中已经提前加好了）：
"typings/**/*.d.ts"
即可解决。
5、此步不能省略，在main.ts中修改为如下（增加引入router路由）：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
// createApp(App).mount('#app')
const app = createApp(App)
app.use(router)
//app.use(router) 需放在app.mount('#app')前面
app.mount('#app')6、在App.vue中引入路由router-view即可：
<template>
<router-view></router-view>
</template>当然可以将ChatGPT机器生成的登录完善一下更好。比如修改成element-puls组件展示，进行后台验证，等等。
其他补充说明：如果使用Webstorm编写时，在使用ElMessage.success("保存成功");显示：TS2304: Cannot find name 'ElMessage'.那么可以在这一行前面加上// @ts-ignore即可。