- 安裝腳手架
卸載原來的腳手架 npm uninstall vue-cli -g
下載新的腳手架 npm uninstall vue-cli -g
或者 npm install --global @vue/cli@next
vue create vue3-bm
選擇功能進(jìn)行下載
image.png
- 啟動(dòng)項(xiàng)目
npm install
npm run serve //啟動(dòng)項(xiàng)目
image.png
-
配置環(huán)境變量和代理
我們在項(xiàng)目中可以使用env 創(chuàng)建環(huán)境變量
新建三個(gè)文件
image.png
配置打包
"serve": "vue-cli-service serve",
"insidetest": "vue-cli-service build --mode insidetest",
"release": "vue-cli-service build --mode release",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
通過 npm run serve 啟動(dòng)本地 , 執(zhí)行 development
通過 npm run release 打包測試環(huán)境 , 執(zhí)行 release
通過 npm run build 打包正式 , 執(zhí)行 production
以 VUE_APP_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。
比如,VUE_APP_HOST = 'development' 通過process.env.VUE_APP_HOST訪問。
除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個(gè)特殊的變量NODE_ENV 和BASE_URL
4 如果需要跨域，我們此時(shí)需要配置代理
我們新建一個(gè)vue.config.js
module.exports = {
publicPath: "",
runtimeCompiler: true,
productionSourceMap: !isProduction,
lintOnSave: true,
// 如果開發(fā)環(huán)境，注釋掉代理
devServer: {
host: "localhost",
port: 8080,
//如果訪問local 再把代理打開
proxy: {
"/api": {
// target: 'http://59.110.228.107:8020',
changeOrigin: true,
pathRewrite: {
"^/api": "" //這里理解成用'/api'代替target里面的地址,比如我要調(diào)用'http://40.00.100.100:3002/user/add'，直接寫'/api/user/add'即可
}
}
}
},
css: {
// 是否使用css分離插件，要不然release版css不單獨(dú)生成文件
extract: true
},
};
- 配置 移動(dòng)端適配(vw/vh方案)
npm install postcss-px-to-viewport -D
修改 .postcssrc.js
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-px-to-viewport': {
viewportWidth: 375, // 視窗的寬度，對應(yīng)的是我們設(shè)計(jì)稿的寬度，一般是750
unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無法整除）
viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個(gè)通用的類名
minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
}
}
}
rem適配方案
npm install lib-flexible postcss-pxtorem --save
配置vue.config.js和package.json
//main.js
import 'lib-flexible/flexible.js'
//package.json
"postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},
//vue.config.js
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
browsers: ['Android >= 4.0', 'iOS >= 7']
}),
pxtorem({
rootValue: 37.5,
propList: ['*'],
})
]
}
}
}
}
6 vant 按需引入
https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian
7 寫入 公用css
image.png
8 封裝axios
1 app.use(Vant).use(store).use(router).mount('#app');
app.use(axios)
這個(gè)自己封裝就可以了
- 添加路由
npm install --save vue-router
const router = createRouter({
history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
routes: []
10 配置store
import { createStore } from "vuex";
export default createStore({});
app.use(router);
app.use(store);
11 webpack 打包遇到問題
# [關(guān)于webpack,打包時(shí)遇到的錯(cuò)誤]
in ./src/assets/logo.png
Syntax Error: Error
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/li
b!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modul
es/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=template&id=01277482 2:0-43 6:7-17
@ ./src/App.vue?vue&type=template&id=01277482
@ ./src/App.vue
@ ./src/main.js
@ multi ./src/main.js
解決辦法
npm remove image-webpack-loader
cnpm install "image-webpack-loader": "^7.0.1",
