安装包语法 yarn add <包名> -D
说明: -D是编译的时候使用，生成后不会使用的包
初始版项目
yarn create @vitejs/app my-vue-app --template vue-ts
cd <project-name>
yarn
yarn dev
安装路由并配置
yarn add vue-router@4
- 新建router文件夹
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'index',
component: () => import('../pages/index.vue'),
},
{
path: '/example/scrollTop',
name: 'examplescrollTop',
component: () => import('../pages/example/scrollTop.vue'),
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
- 在main.ts中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app
.use(router)
.mount('#app')
安装vant
yarn add vant@3
- 按需引入vant样式文件设置
安装vite-plugin-style-import
yarn add vite-plugin-style-import -D
配置vite-plugin-style-import ,在vite.config.ts中引入并添加
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style`,
},
],
}),
]
})
- 浏览器适配
安装amfe-flexible
yarn add amfe-flexible
配置amfe-flexible,在跟目录的index.html入口文件中添加
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>
安装postcss-pxtorem
yarn add postcss postcss-pxtorem -D
配置postcss-pxtorem,在跟目录新建postcss.config.js文件
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
安装sass
yarn add sass -D
