搭建vue3.0 项目
2021-01-22 本文已影响0人
hegege
- 安装脚手架
卸载原来的脚手架 npm uninstall vue-cli -g
下载新的脚手架 npm uninstall vue-cli -g
或者 npm install --global @vue/cli@next
vue create vue3-bm
选择功能进行下载
image.png
- 启动项目
npm install
npm run serve //启动项目
image.png
-
配置环境变量和代理
我们在项目中可以使用env 创建环境变量
新建三个文件
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 启动本地 , 执行 development
通过 npm run release 打包测试环境 , 执行 release
通过 npm run build 打包正式 , 执行 production
以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
比如,VUE_APP_HOST = 'development' 通过process.env.VUE_APP_HOST访问。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL
4 如果需要跨域，我们此时需要配置代理
我们新建一个vue.config.js
module.exports = {
publicPath: "",
runtimeCompiler: true,
productionSourceMap: !isProduction,
lintOnSave: true,
// 如果开发环境，注释掉代理
devServer: {
host: "localhost",
port: 8080,
//如果访问local 再把代理打开
proxy: {
"/api": {
// target: 'http://59.110.228.107:8020',
changeOrigin: true,
pathRewrite: {
"^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
}
}
}
},
css: {
// 是否使用css分离插件，要不然release版css不单独生成文件
extract: true
},
};
- 配置 移动端适配(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, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`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)
这个自己封装就可以了
- 添加路由
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 打包遇到问题
# [关于webpack,打包时遇到的错误]
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",
