npm install 或者 cnpm install
npm run serve
npm run build
npm run test
1、单个项目实现多个单页开发(项目a、项目b),可独立打包各个单页且打包后内容按照单页分割,互不影响,也不会因为更改某一个
单页导致其他单页也需要打包一起发布,从而减少对线上其他版本影响,便于维护
2、大部分开发依赖采用cdn方式引入,减少打包时长和加快网页加载速度
3、路由配置为懒加载,js独立打包,gz压缩
4、添加编辑器代码风格约束,便于多人共同协作
5、增加eslint代码格式约束
6、css样式采用module方式,实现生成的class类名为hash值,增强了css代码安全性
7、git commit增加了tslint检查,如果检查通不过,则不允许提交到git
8、加载动画、吐司/带图标吐司、ActionSheet、车牌输入键盘控件等,前三个为全局函数调用方式,如:
this.$toast({text: '我是提示消息'})
9、px自动转为rem,为不同设备进行屏幕适配
vue.config.js文件中
const postcss = px2rem({
remUnit: 37.5, // 设计图iphone 678 = 750 / 20
remPrecision: 10
});
src/common/js/init.ts
const setRootFontSize = () => {
// 进行rem适配 设置根元素字体大小
const width = document.documentElement.clientWidth || document.body.clientWidth;
const htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = width / 10 + 'px';
};
// 设置适配
setRootFontSize();
// 屏幕大小改变后,重新进行设置根字体大小
window.onresize = () => {
setRootFontSize();
};
1、hash模式下访问方式为:
2、history模式下访问方式为:
3、history模式配置参考:
路由:
{
path: '/demo01/demo',
name: 'demo',
component: demo组件
}
代理:
devServer: {
host: '0.0.0.0', // host: 'localhost',
// https: false, // https:{type:Boolean}
open: false, // 配置自动启动浏览器
hotOnly: true, // 热更新
port: 8081,
historyApiFallback: {
rewrites: (() => { // 自动处理单页应用
const arr = [];
config.buildEntries.map((name) => {
arr.push({
from: new RegExp(`\/${name}\/.*$`), to: `/${name}/index.html`
});
});
return arr;
})()
},
proxy: {
'/api': {
target: 'http://www.baidu.com',
changeOrigin: true,
pathRewrite: {}
}
}
}