1.node 的版本至少16
如果想升级稳定版node 可以执行如下命令
npm install -g n --force
安装最新的版本 n latest
安装最近的稳定版本 n stable
2.搭建vite
npm create vite
3.安装pinia
npm add pinia@next
挂载pinia https://pinia.web3doc.top/ 这个是关于这个的官网 具体方法可以详细了解这个
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
4.安装vant3 附上官网https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
npm i vant
相关插件也要对应安装
npm i unplugin-vue-components -D
在vite.config.ts中配置
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
};
5.安装router4
npm install vue-router
在src目录下新增router的文件夹index.ts
main.ts下
app.user(router)
import router from './router/index'
6.适配方案
npm install postcss-pxtorem
px转换成rem适配 直接在vite.config.ts中配置
amfe-flexible插件
npm i -S amfe-flexible
在main.ts 中引入
附上新的配置
vite.config.ts
import { defineConfig } from 'vite'
import path, { resolve } from "path"
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import postcssImport from "postcss-pxtorem"
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
}
}, // 这边需要配置后需要配置一下tsconfig.json，不然我们在代码使用@会错误提示
server: {
host: '0.0.0.0',
cors: false, //true 页面不会自动更新
proxy: {
"/api": {
target: "xxxxxxxxxx", // easymock
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, "")
}
}
},
// 适配
css: {
postcss: {
plugins: [
postcssImport({
// 这里的rootValue就是你的设计稿大小
rootValue: 37.5,
propList: ['*'],
})
]
}
}
})
tsconfig.json最新配置
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
// 解析非相对模块名的基准目录
"baseUrl": "./",
// 模块名到基于 baseUrl的路径映射的列表。
"paths": {
"@": ["src"],
"@/": ["src/"]
},
},
"include": ["src//.ts", "src//.d.ts", "src//.tsx", "src//.vue"],
"references": [{
"path": "./tsconfig.node.json"
}]
}
main.ts 最新配置
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
import 'amfe-flexible'
const pinia = createPinia()
const app = createApp(App)
import { Form, Field, CellGroup, Button, Divider } from 'vant';
app.use(Button);
app.use(Form);
app.use(Field);
app.use(CellGroup);
app.use(Divider)
// 挂载到 Vue 根实例
app.use(pinia)
createApp(App).use(router).mount('#app')
6.安装axios，安装less，安装js-cookies
npm install axios
npm i less-loader less --save-dev
npm install --save @types/js-cookie
npm install --save js-cookie
在scr目录下新建 封装的axios
import axios from 'axios'
// import { ElMessage } from 'element-plus'
// import { getToken } from '@/utils/auth'
import { getToken } from "@/utils/cookies"
export const request = (options: any) => {
return new Promise((resolve, reject) => {
// create an axios instance
const service = axios.create({
// baseURL: process.env.BASE_API, // api 的 base_url
baseURL: '/api',
timeout: 80000 // request timeout
})
// request interceptor
service.interceptors.request.use(
(config: any) => {
let token: string = ''//此处换成自己获取回来的token，通常存在在cookie或者store里面
// if (token) {
// // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
// config.headers['X-Token'] = token
// config.headers.Authorization = + token
// }
if (getToken()) {
token = getToken() + ''
}
config.headers['restLoginToken'] = token;
return config
},
error => {
// Do something with request error
console.log("出错啦", error) // for debug
Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
(response: any) => {
return response.data
},
error => {
console.log('err' + error) // for debug
if (error.response.status == 403) {
// ElMessage.error('错了')
console.log('错了');
} else {
// ElMessage.error('服务器请求错误，请稍后再试')
console.log('服务器请求错误，请稍后再试');
}
return Promise.reject(error)
}
)
// 请求处理
service(options)
.then((res) => {
resolve(res)
})
.catch((error) => {
reject(error)
})
})
}
export default request
end：到最后差不多就部署完成啦