1、准备并安装node.js
查看是否已经安装node.js，
命令行下输入node -v
如果提示 "node" 不是有效命令，则代表未安装 Node.js环境，先进行下载安装
2、检查npm的版本信息
命令行下输入npm –v
进入需要创建vue3项目的目录下
cd d:/Temp
执行vite命令创建vue3项目
npm init vite@latest输入项目名称
选择vue
选择脚本，这里我选择TypeScript
搭建完成
安装默认依赖，可直接根据上图提示执行操作
进入刚刚创建的项目目录
cd elementui安装默认依赖
npm install
运行vue3
npm run dev
浏览器中输入http://localhost:5173
出现如上界面，说明安装成功。
这里使用VsCode开发工具，用VsCode打开项目，新建一个终端，配置所需依赖
npm install @types/node --save-dev
修改vite.config.ts配置文件代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
//解决“vite use `--host` to expose”
base: './',
server: {
host: '0.0.0.0',
// port: 8080,
open: true
},
resolve:{
//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})安装路由
npm install vue-router@4
在src目录下新建router文件夹，在router里创建index.ts文件
index.ts中配置路由
下面@引入方式会报错，原因是还没配置，后面第7步会配置，此处错误可以先不管。
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// import Layout from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
//路由初始指向
path: '/',
name: 'HelloWorld',
component:()=>import('../components/HelloWorld.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
main.ts中导入挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App);
app.use(router).mount('#app')修改App.vue管理路由
<script setup lang="ts">
</script>
<template>
<router-view></router-view>
</template>
<style>
</style>保存，运行看是否报错。如图打开了路由指向的HelloWorld.vue页面的内容就对了
正常运行
配置ts文件采用@方式导入
在tsconfig.json文件中添加配置（下图打注释的都是添加的，也可自己丰富）
配置完成后建议重新run一下
tsconfig.json
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
tsconfig.app.json
{
"compilerOptions": {
"target": "ES2020",
"composite": true,
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
//添加---
"suppressImplicitAnyIndexErrors": true, //允许字符串用作下标
"ignoreDeprecations":"5.0", //高版本上句报错，此句解决。如此句报错可注释掉
"baseUrl": ".",
"paths": {
"@/*":[
"src/*"
]
}
//---
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
//添加---
"exclude":["node_modules"] // // ts排除的文件
//---
}
tsconfig.node.json
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}
引入element-plus
element-plus是vue3目前大流行组件库，用法基本和element ui一样
npm install element-plus --save
npm install @element-plus/icons-vue // 图标
main.ts中引入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";//国际化
const app = createApp(App);
app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')
//全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}使用element plus组件
修改HelloWorld.vue的内容
<template>
<el-button type="primary" size="default" :icon='Plus'>新增</el-button>
</template>
<script setup lang="ts">
import {Plus} from '@element-plus/icons-vue';
</script>
<style scoped lang="scss">
</style>【问题】
国际化时如果安装了^2.3.8上的高版本或找不到包，解决方法：
需要在vite-env.d.ts加入
declare module "element-plus/dist/locale/zh-cn.mjs"
main.ts 中
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
若仍然有问题，修改为如下引用
import zhCn from "element-plus/es/locale/lang/zh-cn"
运行后显示
安装pinia（状态管理，类似vue2中的vuex）
npm install pinia全局引入pinia
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //国际化
import { createPinia } from 'pinia'
const app = createApp(App);
// 实例化 Pinia
const pinia = createPinia()
app.use(ElementPlus,{locale: zhCn}).use(router).use(pinia).mount('#app')
//全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}安装ElementPlus的默认引入
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import然然后把下列代码插入到你的 Vite 的配置文件中
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [
vue(),
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
//解决“vite use `--host` to expose”
base: './',
server: {
host: '0.0.0.0',
// port: 8080,
open: true
},
resolve:{
//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})