该文章仅拿来做记录，温故而知新
1.创建vue项目
项目本人是用vue-cli进行创建
创建项目：
vue create 项目名
选择
Manually select features 自我配置想要的功能
概述特性：
choose vue version
选择vue版本
bable
es6转es5
TypeScript
支持TS
Progressive Web App (PWA) Support PWA
渐进式的网页应用程序
Router
vue路由
Vuex
vue状态管理器
CSS Pre-processors
css预处理器
Linter / Formatter
支持代码风格检查和格式化
Unit Testing
单元测试
E2E Testing
支持 E2E 测试
一般根据自己项目需要进行选择
选择vue2或vue3 当前选择的vue2
路由选用history模式
选择自己喜欢的css预处理器
abel、ESLint 等的配置存放选择都存放在package.json
是否保存当前选的方便以后使用 这个我一般我都不保存
成功完成项目创建
2.关于项目结构规划
清理完原有的重新写入自己所熟悉的目录结构
1.引入重置样式
在assets文件夹下放入重置样式文件，并在main.js引入
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2.规划页面，我选用常规后台页面规划
不做详细描述！！！
项目创建基本完成 请求封装以后再加 乏了！
3.引入并使用lib-flexible和postcss-pxtorem
首先进行引入，因为直接下载postcss-pxtorem运行会进行报错
所以我们直接引入5.1.1版本
npm引入：
npm install postcss-pxtorem@5.1.1 –save-dev
npm install lib-flexible –save-dev
yarn引入：
yarn add postcss-pxtorem@5.1.1
yarn add lib-flexible
随后我们在mian.js进行引入
在文件根目录加入vue.config.js文件
加入下面代码
module.exports = {
css: {
sourceMap: false,
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
},
},
},
}
在文件根目录加入postcss.config.js文件
加入下面代码
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 192,
propList: ['*'],
},
},
}
rootValue：是根据屏幕分辨率填的也可以按设计图的长度进行更改
最后因为版本原因，我们需要在
node_modules
里面找到
lib-fiexible
文件夹下的
flexible.js
文件
修改
refreshRem
函数（当然可自行修改根据项目实际情况来限制）
最好运行起来大功告成！！！
描述比较基础简略若，有需要的话可以找我拿代码模板查看！！！