一. 構(gòu)建
a. npm install -g @vue/cli
b. vue create -p dcloudio/uni-preset-vue my-project
c. 接下來會(huì)讓選擇uni-app模板類型
image.png
成功之后會(huì)顯示下面的彈窗提示npm run serve
image.png
d. 搭建之后運(yùn)行發(fā)現(xiàn)錯(cuò)誤百度的方法都嘗試了一遍還是不行錯(cuò)誤截圖如下
b0a169bcd7506fb46d640a7f9700d62.png
解決辦法把vue/cli降級(jí)為4.0.5就可以了
由于沒有及時(shí)的解決問題我選擇了uni + vue3 + vite，接下來的配置多環(huán)境為配置的是uni + vue3 + vite
二. 配置多環(huán)境
-
在package.json文件中添加自己想要的命令在這里我添加了四個(gè)分別代表開發(fā)環(huán)境、測(cè)試環(huán)境、預(yù)發(fā)布環(huán)境和正式環(huán)境配置的變量要用--mode開頭 例如我寫的--mode dev
image.png -
配置相對(duì)應(yīng)的環(huán)境配置我在src目錄下面新建了config文件夾
image.png
里面的主要內(nèi)容是
export default {
BASE_API: "https://", 也就是你不同的環(huán)境將要訪問的不同的服務(wù)器
};
然后在env.js中根據(jù)package.json中配置的變量來訪問config下面不同的文件
import dev from "./.env.dev.js";
import test from "./.env.test.js";
import pre from "./.env.pre.js";
import prod from "./.env.prod.js";
import demo from "./.env.demo.js";
const NODE_ENV = import.meta.env.MODE;
let ENV_VAR = null;
if (NODE_ENV === "dev") {
ENV_VAR = dev;
} else if (NODE_ENV === "test") {
ENV_VAR = test;
} else if (NODE_ENV === "pre") {
ENV_VAR = pre;
} else if (NODE_ENV === "pro") {
ENV_VAR = prod;
} else if (NODE_ENV === "demo") {
ENV_VAR = demo;
}
export default ENV_VAR;
最后在request.js中引入
import ENV_CONFIG from "@/config/env";
三. 引入U(xiǎn)I組件庫（以vant為例）
- 安裝vant
npm i vant@next -S
- 配置按需加載
npm i babel-plugin-import -D
-
在postcss.config.js 加入配置項(xiàng)
image.png
[
"import",
{
libraryName: "vant",
libraryDirectory: "es",
style: true,
},
"vant",
],
- 因?yàn)関ant是用的less解析樣式的所以要安裝less
npm i less less-loader --save
- 這樣vant UI組件庫就引入進(jìn)來了但是會(huì)發(fā)現(xiàn)沒有樣式，這是因?yàn)槲覀冞€沒有將vant的樣式文件引入進(jìn)來
import "vant/lib/index.less";
- 由于是按需加載所以我們每用到一個(gè)UI組件我們就需要在項(xiàng)目中引入進(jìn)來，正常情況下是要在main.js中引入的，我們將其抽離封裝起來在src下新建
vant.config.js文件然后我們用到什么就在里面添加什么，也可以在別的位置添加也可以起別的名字，接下里看一下vant.config.js文件里面的內(nèi)容
import { Button, List, Cell, CellGroup } from "vant";
export function vant(app) {
app.use(Button);
app.use(List);
app.use(Cell);
app.use(CellGroup);
}
然后在main.ts中引入即可
image.png
import { vant } from "./vant.config.js";
vant(app);
這樣就成功的把vant UI組件庫引入到我們的項(xiàng)目中了 接下來就可以愉快的玩耍了
四. 使用alias配置別名（方便引用文件）
找到vite.config.js文件加入以下需要配置的信息
resolve: {
alias: {
"@/": resolve(__dirname, "src"),
"@/api": resolve(__dirname, "src/api"),
"@/config": resolve(__dirname, "src/config"),
"@/static": resolve(__dirname, "src/static"),
"@/utils": resolve(__dirname, "src/utils"),
},
},
五·. 配置打包路徑和項(xiàng)目啟動(dòng)自動(dòng)打開瀏覽器
找到vite.config.js文件加入以下需要配置的信息
base: "./", // 打包路徑
server: {
open: true, // 啟動(dòng)項(xiàng)目自動(dòng)彈出瀏覽器
port: 8080, // 啟動(dòng)端口
},
