Npm操作:
创建vue项目:vue create 项目名称
手动配置特性:Manually select features
选择Babel和Choose Vue version
选择vue版本
文件放在单独的配置文件还是package.json
是否保存配置作为未来的项目
Rem适配:
进阶用法 - Vant 3 (youzan.github.io)里面有浏览器适配
Postcss-pxtorem：GitHub - cuth/postcss-pxtorem: Convert pixel units to rem (root em) units using PostCSS
安装:npm install postcss postcss-pxtorem --save-dev
在package.json同级目录中新建一个postcss.config.js文件，粘贴以下内容
module.exports = {
plugins: {
'postcss-pxtorem': {
// 设置根元素字体大小，根据设计图设置 ，假设设计图是750，此处就设置75，假设设计图是1080，此处就设置108
rootValue: 75,
// propList里面写的是可以从px更改到rem的属性，*就是通配符
propList: ['*'],
// 排除node_modules目录下的所有文件
exclude:/node_modules/i,
// 过滤掉vant-开头的元素选择器，不会对vant组件进行修改了
// .my-开头的类选择器也过滤掉
selectorBlackList:['vant-','.my-'],
},
},
};
Lib-flexible:GitHub - amfe/lib-flexible: 可伸缩布局方案
安装:npm i -S amfe-flexible
在你public文件夹下的index.html中用以下代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
替换掉
<meta name="viewport" content="width=device-width,initial-scale=1.0">
在main.js文件中导入
// h5rem适配
import 'amfe-flexible/index.js'
// 也可以写成:import 'amfe-flexible'
注意:如果样式是行内样式，那么px不会更改为rem
Vant定制主题
Vantdemo：vuecli3的示例工程，GitHub - youzan/vant-demo: Collection of vant demos.
安装并使用vant
用快速上手中，安装vant的指令安装Vant
Vant 2 - 轻量、可靠的移动端组件库 (youzan.github.io)
引入组件的方式:
全局导入组件:将代码写在在main.js中
局部导入组件，将代码写在对应的vue文件内，并将Vue.use(组件名)去掉，在components中注册该组件，components: {[组件名.name]: 组件名}
方式一:导入所有组件:
注意:并不推荐，因为引入所有代码包的话会增加代码的体积
在main.js文件中粘贴下列代码:
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
接下来就能在vue文件中使用组件了
方式二:手动按需引入组件:
在main.js文件中引入以下代码:
注意:将所要导入的文件依次引入，其他组件也是一样的，只需要更改一下样式
全局引入组件：
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
Vue.use(Button)
import Calendar from 'vant/lib/calendar';
import 'vant/lib/calendar/style';
Vue.use(Calendar)
import Cell from 'vant/lib/cell';
import 'vant/lib/cell/style';
Vue.use(Cell)
局部引入组件:
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
import Calendar from 'vant/lib/calendar';
import 'vant/lib/calendar/style';
import Cell from 'vant/lib/cell';
import 'vant/lib/cell/style';
去掉Vue.use()并在components中添加以下代码
components: {
[Button.name]:Button,
[Calendar.name]:Calendar,
[Cell.name]:Cell,
},
方式三:自动按需引入
需要安装插件babel-plugin-import
安装:npm i babel-plugin-import -D
在你的babel.config.js文件内的module.exports中添加以下代码
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
接下来在你的main.js文件内导入组件
全局导入组件
import { Button } from 'vant'
Vue.use(Button)
import { Calendar } from 'vant'
Vue.use(Calendar)
import { Cell } from 'vant'
Vue.use(Cell)
局部导入组件
import { Button,Calendar,Cell } from 'vant'
components :{
[Button.name]:Button,
[Calendar.name]:Calendar,
[Cell.name]:Cell,
},
Vant定制主题样式：
安装Less：npm install -–save-dev less less-loader
具体配置：定制主题，样式变量，配置文件
定制方法：
步骤一：引入样式源文件
手动引入：
引入全部样式：import 'vant/lib/index.less';
引入单个组件样式： import 'vant/lib/button/style/less';
按需引入：在babel.config.js中配置按需引入样式源文件，注意babel6不支持按需引入样式，在babel.config.js中的代码如下，只需要将原有的style:true替换成style:(name)=>`${name}/style/less`就行了
module.exports = { plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', // 指定样式路径 style: (name) => `${name}/style/less`, }, 'vant', ], ], };
步骤二：修改样式变量
如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。以下部分为代码:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量
注意:此处需要按照配置文件中的样式修改，如果引入的是全部样式或者是按需引入，那么所有的组件内的同一样式都会被修改，如果引入的是单个组件样式，那么只有这个组件内的样式会被修改。例如源文件中的样式白色@white: #fff;你想将原本是白色的地方改为黑色，则在此处写:white: ‘#000‘，变量名如果有-需要用引号包裹，否则就不需要包裹
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
注意:在你的src目录下，新建一个styles文件，在其内部新建less文件，注意在你的less文件中修改样式时，变量名前需要用@,变量名和变量值都不需要引号包裹，用分号分隔，由于导入的时候需要的是绝对路径，所以我们在vue,config.js中需要使用path模块，const path = require(‘path’)
const 自定义名称= path.resolve(__dirname,’./src/styles/文件名.less’)__dirname表示当前目录，即为项目的根目录，然后将hack: `true; @import "your-less-file-path.less";`,替换成hack: `true; @import "${自定义名称}";`,
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
容易报错:
执行 npm install --save less less-loader
安装完less 后 ，在style 中使用less 时会报error
这种情况是less-loader版本过高引起的，可以在package.json 中查看当前less 的版本
所以针对这种情况我们可以先把现有的less-loader 卸载掉,然后去安装低版本的less-loader
npm uninstall less-loader（卸载当前less-loader）
npm install [email protected] –save
scoped代表只在当前组件中生效
lang='less'表示使用了less
浏览器适配
在vue项目中，使用autoprefixer为项目中的css自动添加浏览器前缀，autoprefixer是postcss的一款插件，要先安装postcss-pxtorem
安装插件:
npm install postcss postcss-pxtorem --save-dev
npm install --save-dev autoprefixer
安装好后，在package.json同一层目录下创建postcss.config.js文件，并在postcss.config.js中添加以下代码:
module.exports = {
plugins: {
"autoprefixer":{
"overrideBrowserslist":[
"ie >= 8",//兼容ｉｅ７以上的浏览器
"Firefox >= 3.5",//兼容火狐版本号大于３.５的浏览器
"chrome >= 3.5",//兼容谷歌版本号大于３５的浏览器
"opera >= 11.5",//兼容欧朋版本号大于１１.５的浏览器
// 注意:以上兼容只适用于ＰＣ端开发,如果做的是移动端项目,你可以在ｖａｎｔ官网,进阶用法中,找到ｒｅｍ布局适配,用以下代码
// 'Android >= 4.0',
// 'ios >= 8'
// 来替换以上适配
]
},
"postcss-pxtorem":{
rootValue:75,//设置ｒｏｏｔ元素的字体大小，值为移动端页面宽度／１０
propList:['*'],//可以设置ｐｘ更改到ｒｅｍ的属性
selectorBlackList:['van-','.my-'],//过滤掉ｖａｎ－开头的元素选择器和．ｍｙ－开头的类选择器
exclude:/node_modules/i,//排除ｎｏｄｅ＿ｍｏｄｕｌｅｓ目录及目录下的文件
}
}
}
容易报错
postcss-pxtorem版本过高
运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
npm i [email protected]