创建和配置一个vue3项目
创建一个基本的vue3项目
https://www.cnblogs.com/huihuihero/p/12272594.html
版本更新需要：vue版本变更，Vue脚手架版本变更，如何全局使用及问题解决相关
https://www.cnblogs.com/huihuihero/p/16312696.html
项目运行环境及版本号相关
需要 node14+ 版本，如果涉及到Node版本切换可以参考这个
https://www.cnblogs.com/huihuihero/p/16865904.html
开发过程体验
【导出的问题】构建的时候比较多的采用了export default，采用的是先将各个文件汇总到一个文件里再export default统一导出。以为管理起来较为方便。
实际开发过程中发现这种方式较为繁琐。对多人项目也不是很友好。
故建议根据情况优先选择各文件export直接导出即可，而非汇总后再用export default统一导出
项目目录配置-思维导图下载
https://files.cnblogs.com/files/huihuihero/vue3项目目录思维导图.zip
项目目录配置-图解
全局样式配置
https://www.cnblogs.com/huihuihero/p/16334463.html
开发环境、测试环境、正式环境配置
项目目录下新建三个文件夹
【.env.development】开发环境
VUE_APP_BASE_API=http://192.168.2.106/api //根接口地址
VUE_APP_BASE_URL=https://www.development.com //项目根地址
VUE_APP_ROUTER_MODE=hash //路由模式history、hash
VUE_APP_PUBLIC_PATH=/ //域名根路径，如配置/demo/，则www.xxx.com配置后成www.xxx.com/demo/
VUE_APP_MODE=development //哪种环境
【.env.testing】测试环境
VUE_APP_BASE_API=https://www.testing.com/api
VUE_APP_BASE_URL=https://www.testing.com
VUE_APP_ROUTER_MODE=hash
VUE_APP_PUBLIC_PATH=/
VUE_APP_MODE=testing
【.env.production】正式环境
VUE_APP_BASE_API=https://www.xxx.com/api
VUE_APP_BASE_URL=https://www.xxx.com
VUE_APP_ROUTER_MODE=history
VUE_APP_PUBLIC_PATH=/
VUE_APP_MODE=production
package.json里配置
"scripts": {
"serve": "vue-cli-service serve --mode development", //运行，采用运行环境配置
"serve:test": "vue-cli-service serve --mode testing", //运行，采用测试环境配置 执行yarn run serve:test 或 npm run serve:test
"serve:prod": "vue-cli-service serve --mode production", //运行，采用正式环境配置
"build": "vue-cli-service build --mode production", //打包，采用正式环境配置
"build:test": "vue-cli-service build --mode testing", //打包，采用测试环境配置
"build:dev": "vue-cli-service build --mode development" //打包，采用开发环境配置
},
vue.config.js配置
参考1：https://blog.csdn.net/weixin_35773751/article/details/123414144
参考2：https://zhuanlan.zhihu.com/p/199438565
基本配置
const { defineConfig } = require("@vue/cli-service");
const path = require("path");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
host: "0.0.0.0",
port: 8008,
// open: true, //自动打开浏览器
},
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [path.resolve(__dirname, "./src/styles/index.less")],
},
},
lintOnSave: false, //取消eslint检测
productionSourceMap: false, //设为false可减小打包后包体积，默认为true
publicPath: process.env.VUE_APP_PUBLIC_PATH, //配置域名根路径，如配置/demo/，则www.xxx.com配置后成www.xxx.com/demo/
assetsDir: "static", //设置打包后静态资源放在static文件夹里
outputDir: "dist",
});
接口请求及axios相关配置
https://www.cnblogs.com/huihuihero/p/16699954.html
使用iconfont
1、在assets文件夹下新建icons文件夹
2、从iconfont下载字体图标包(选择Font class格式下载)解压，然后把解压后所有文件复制到icons文件里即可
3、在main.js中引入：import './assets/icons/iconfont.css'
(若有报错，安装css-loader包)
4、使用：<div class="iconfont iconyiguoqi"></div>
index.html配置，包含滚动条美化
<!DOCTYPE html>
<html lang="" class="beauty-scroll">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="keyword1,keyword2"/>
<meta name="description" content="网站介绍"/>
<!-- PC端配置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 移动端配置 -->
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no"> -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
.beauty-scroll {
scrollbar-color: #5cdbd3 #f7f7f7;
/* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
scrollbar-width: thin;
/* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
-ms-overflow-style: none;
/* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
/* 以下是chrome浏览器自定义滚动条样式方式 */
}
.beauty-scroll ::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.beauty-scroll ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 8px;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
background: #5cdbd3;
}
.beauty-scroll ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
border-radius: 8px;
background: #f7f7f7;
}
</style>
</head>
<body>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
<div id="app"></div>
</body>
</html>
组件配置
https://www.cnblogs.com/huihuihero/p/16708391.html
语言切换配置-i18n@9.x
https://www.cnblogs.com/huihuihero/p/16717484.html
utils配置
【utils/index.js】
import languageUtil from "./language";
import terminalUtil from "./terminal"
import authUtil from "./auth"
import fileUtil from "./file"
import commonUtil from "./common"
export {
languageUtil,
terminalUtil,
authUtil,
fileUtil,
commonUtil
};
【utils/file/base64Deal.js】
const base64Deal = "base64相关";
export default base64Deal;
【utils/file/download.js】
const downloadVideo = "下载视频相关";
const downloadFile = "下载文件相关";
const downloadImg = "下载图片相关";
export {
downloadVideo,
downloadFile,
downloadImg
};
【utils/file/index.js】
import base64Deal from "./base64Deal";
import { downloadVideo, downloadImg, downloadFile } from "./download";
export default {
base64Deal,
downloadVideo,
downloadImg,
downloadFile,
};
【util-use-demo.vue】
<script>
import { terminalUtil } from "@/utils/index";
export default {
setup() {
const ism = terminalUtil.isMobile;
console.log(ism)
},
};
</script>
路由配置
https://www.cnblogs.com/huihuihero/p/16723410.html
vuex配置
https://www.cnblogs.com/huihuihero/p/16730161.html
移动端适配
https://www.cnblogs.com/huihuihero/p/16918633.html
引入vant ui
1、yarn add vant 或 npm install vant --save
2、在main.js中
【全部引入】
import vant from "vant"
import "vant/lib/index.css"
app.use(vant)
【按需引入】
import { Button } from 'vant';
import 'vant/lib/index.css';
app.use(Button);
官网：https://vant-contrib.gitee.io/vant/#/zh-CN/
引入element ui
1、yarn add element-plus 或 npm install element-plus --save
2、在main.js中全部引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
官网：https://element-plus.gitee.io/zh-CN/guide/installation.html
附最终配置完成后的main.js文件代码（附两种格式规范）
第一种格式规范
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App); //创建vue实例
import { setupComponents } from "@/components/index"; //全局组件引入
import { setupRouter } from "@/router/index"; //路由
import { setupStore } from "./store"; //vuex
import { setupI18n } from "@/language/index"; //i18n语言切换
const setStyles = () => import("@/styles/index.less"); //引入公用样式
const setIconfont = () => import("@/assets/icons/iconfont.css"); //iconfont
/**
* 移动端适配--lib-flexible，↓↓↓
* 注释：这里为什么不像上面setStyles那样先const xx=()=>import("@/xx/xx")引入，而是采用import "@/xx/xx"的格式引入。
* 因为setStyles那种import("@/xx")是动态加载，和import "@/xx"是有区别的。而这个lib-flexible需要先引入后生效，动态引入会导致引入和生效的顺序问题，效果不是很理想。
* 动态引入和静态引入具体区别见：https://www.cnblogs.com/huihuihero/p/16921002.html
*/
import "lib-flexible/flexible.js";
async function setupApp() {
setStyles();
setIconfont();
setupComponents(app);
setupRouter(app);
setupStore(app);
await setupI18n(app); //异步案例：语言文件可能从服务器端获取
app.mount("#app");
}
setupApp();
第二种格式规范
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App); //创建vue实例
import { setupComponents } from "@/components/index"; //全局组件引入
setupComponents(app);
import { setupRouter } from "@/router/index"; //路由
setupRouter(app);
import { setupStore } from "./store"; //vuex
setupStore(app);
import { setupI18n } from "@/language/index"; //i18n语言切换
setupI18n(app);
import "@/styles/index.less"; //引入公用样式
import "@/assets/icons/iconfont.css"; //iconfont
import "lib-flexible/flexible.js"; //移动端适配--lib-flexible
// vant
import vant from "vant"
import "vant/lib/index.css"
app.use(vant)
app.mount("#app");
拓展
【实现在request.js里引用store】
首先引入并暴露实例，然后再调用实例，其他模块如route等同理
https://www.cnblogs.com/huihuihero/p/17312127.html
【关于basic layout布局设置 】
项目layout页的布局，可实现content区域高度不足以撑开页面时，footer也在底部
https://www.cnblogs.com/huihuihero/p/17312176.html
【项目样式差异标准化处理】
https://www.cnblogs.com/huihuihero/p/17317828.html
浙公网安备 33010602011771号