vue3.x⾸次搭建-遇到的问题vite2.x 初始化项⽬
兼容性注意
Vite 需要版本 >= 12.0.0。
下⾯项⽬使⽤ ts, 初始化项⽬：
cnpm create @vitejs/app my-vue-app --template vue-ts
引⼊ vant , 实现按需加载+修改主题
需要安装的⼀依赖包：cnpm install less sass vite-plugin-imp -D
关键代码上图圈住的，具体fig.ts配置⽂件如下：
import { defineConfig } from'vite'
import vue from'@vitejs/plugin-vue'
import vitePluginImp from'vite-plugin-imp'
const { resolve } = require('path')
//vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 按需引⼊
vitePluginImp({
libList: [
{
libName: 'vant',
style(name) {
if (/st(name)) return false
return `vant/es/${name}/index.less`
}
},
]
})
],
css: {
preprocessorOptions: {
// 重置vant的样式变量：github/youzan/vant/blob/dev/src/style/var.less
less: {
modifyVars: {
'button-primary-color': 'red',
'button-primary-border-color': 'red'
},
},
scss: {
additionalData: `
@import "./src/styles/_var.scss";
@import "./src/styles/_mix.scss";
`
}
}
},
base: '/ybs',
alias: [
{ find: '/@', replacement: resolve(__dirname, 'src') },
{ find: '/@ser', replacement: resolve(__dirname, 'src/services') },
{ find: '/@comp', replacement: resolve(__dirname, 'src/components') }
],
server: {
port: 8080,
proxy: {
'/api': {
target: '10.9.129.13',
changeOrigin: true,
secure: false,
}
}
}
})
其他配置基本和1.x版本⼀样，可以参考下⾯说明
vite1.x 初始化项⽬
git地址:
npm init vite-app <project-name> cd <project-name> npm install npm run dev
安装常⽤插件：
{
"name": "xxx",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
vue element admin},
"dependencies": {
"@types/axios": "^0.14.0",
"axios": "^0.21.0",
"dayjs": "^1.9.7",
"element-plus": "^v1.0.1-beta.14",
"vue": "^3.0.4",
"vue-router": "^4.0.1",
"vuex": "^4.0.0-rc.2"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.4",
"sass": "^1.30.0",
"typescript": "^4.1.3",
"vite": "^1.0.0-rc.13"
}
}
添加配置⽂件：shims.d.ts（2.x版本会⾃动添加在src/shims-vue.d.ts）  使⽤ts开发，需要添加配置⽂件，不然ts不认识.vue⽂件
shims.d.ts
declare module '*.vue' {
import { ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}
添加tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
/* ⽤来指定编译时是否⽣成.map⽂件 */
"declarationMap": false,
"sourceMap": false,
"paths": {
"/@/*": ["./src/*"],
"/@ser/*": ["./src/services/*"],
"/@comp/*": ["./src/components/*"]
}
},
"exclude": ["node_modules", "dist"]
}
引⼊Vue Router4
安装： cnpm i vue-router@next -S
使⽤命令⾏查看vue-router 所有版本号:  npm info vue-router versions
route/index.ts:
import { RouteRecordRaw, createRouter, createWebHashHistory } from'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/home/:id',
name: 'Home',
component: () => import('../test/Home.vue'),
},
{
path: '/user',
name: 'User',
component: () => import('../views/User.vue'),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
添加UI插件 element-plus，main.ts ⽂件如下：
element-ui ⽬前不⽀持vue3; 使⽤  element-plus，⽤法UI基本⼀样
import { createApp } from'vue'
import App from'./App.vue'
import store from'./store/index'
import router from'./router/index'
import ElementPlus from'element-plus'
import zhLocale from'element-plus/lib/locale/lang/zh-cn'  // 国际化
import 'element-plus/lib/theme-chalk/index.css'
import './styles/index.scss'
createApp(App)
.use(router)
.use(store)
.use(ElementPlus, { locale :zhLocale })
.mount('#app')
配置⽂件：fig.ts（vue2的fig.js，2.x 版本参考上⾯说明）  git地址:
//git地址 github/vitejs/vite/blob/master/src/node/config.ts
const path = require('path');
// 配置别名
alias: {
'/@/': solve(__dirname, './src'),
'/@comp/': solve(__dirname, './src/components'),
},
// 端⼝，默认3000
port: '8080',
// 是否⾃动在浏览器打开
open: true,
/
/ 配置部署基础路径
base: 'admin',
// 引⽤全局 scss
cssPreprocessOptions: {
scss: {
additionalData: `
@import "./src/styles/_var.scss";
@import "./src/styles/_mix.scss";
`
}
},
/
/ 为开发服务器配置⾃定义代理规则
proxy: {
'/api': {
target: '10.110.52.28:8081',
changeOrigin: true,
secure: false,
}
}
}
问题1：  v-on="$listeners" 不能使⽤，v-bind="$attrs" 代替；
问题2：slot-scope="scope" 被废弃，使⽤  v-slot="scope"
问题3： scss  的 /deep/ 不能使⽤（⾄少在我写这个博客时）
解决：使⽤  ::v-deep或者:deep（控制台会报警告，但总⽐不能使⽤好）
deep报错：
问题4：修改全局的样式，例如重置element样式，保存可以⽴即⽣效，不过刷新还
版本已经解决）
是原来⼀样，需要
；（2.x 版本已经解决
）
重启才⽣效；（
是原来⼀样，需要重启才⽣效
问题5：import dayjs from 'dayjs' 报错；
解决⽅法1：import * as dayjs from 'dayjs';
解决⽅法2：tsconfig.json，添加配置⽂件：
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
问题6： element-plus 默认英⽂，需要使⽤中⽂如下配置：
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App).use(router).use(ElementPlus, { locale :zhLocale }).mount('#app')
element-plus 版本在 v1.0.1-beta.14 时，还可以使⽤上⾯⽅法，后⾯不知道什么版本开始，就不能使⽤了会报错：
作者的解决⽅法：先在 node_nodules/element-plus/lib/locale/lang/zh-cn.js 到配置，然后直接拿出来使⽤；
问题7：使⽤别名后，vetur报错 Cannot find module
解决：tsconfig.json ⽂件添加路径配置
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"sourceMap": true,
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"paths": {
"/@/*": ["./src/*"]
}
}
}
问题8：import echarts from 'echarts' 报错
解决：import * as echarts from 'echarts';
路由相关：
获取当前路由：const route = useRoute(); 或者：
路由跳转（之前⼀致）：
监听路由变化：
路由钩⼦：
home页⾯的钩⼦：
404路由配置：
{
path: '/404',
name: '404',
component: () => import('/@/views/404.vue')
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。