1.创建vite项目
通过npm初始化
npm init vite@latest
通过Yarn
yarn create vite
或者自定义模板
# npm 6.x
npm init vite@latest my-vue-app --template vue-ts
# npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue-ts
# yarn
yarn create vite my-vue-app --template vue-ts
2.配置vite.config.ts(别名+跨域)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
publicPath: './',
// 设置别名
configureWebpack: {
resolve: {
alias: {
// 这里 使用 "@/assets" 会报错
assets: resolve('src/assets'),
components: resolve('src/components'), //组件
views: resolve('src/views'), //视图
utils: resolve('src/utils'), // 工具类
api: resolve('src/api'), // 接口
},
},
},
// 配置跨域
devServer: {
host: '0.0.0.0',
proxy: {
'/api': {
target: 'http://192.168.1.130:8080',
ws: true,
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '',
},
},
},
},
};
遇到问题:
解决:安装 @type/node
3.安装vue-router
yarn add vue-router@next
新建 router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
const routes:Array< RouteRecordRaw > = [] //路由写法与vue2版本一样,下边在补充
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
配置main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
4.项目启动报错
解决:vite.config.js里面defineConfig下加上
server: {
host: '0.0.0.0'
},
5.安装axios
yarn add axios / npm install axios -S
6.安装vant
yarn add vant@3 / yarn add vant@3
在 vite 项目中按需引入组件(推荐)
在 vite 项目中使用 Vant 时,推荐安装 vite-plugin-style-import 插件,它可以自动按需引入组件的样式.
yarn add vite-plugin-style-import / npm i vite-plugin-style-import -D
安装完成后,在 vite.config.js
文件中配置插件:
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style/index`,
},
],
}),
],
};