vue-cli4.x创建企业级项目的方法步骤
安装脚手架（vue-cli）
$npminstall@vue/cli-g//全局安装最新的脚手架
创建项目
$vuecreatevue-demo
在创建项目的时候可以使用
$vueui
来进行创建，两种方式在创建的时候，直接选择上router和vuex，来进行项目创建
移动端Vant
#通过npm安装 $npmivant-S #通过yarn安装 $yarnaddvant
我这里都是使用的按需引入，用了
babel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式
安装插件
npmibabel-plugin-import-D
//在.babelrc中添加配置
//注意：webpack1无需设置libraryDirectory
{
"plugins":[
["import",{
"libraryName":"vant",
"libraryDirectory":"es",
"style":true
}]
]
}
//对于使用babel7的用户，可以在babel.config.js中配置
module.exports={
plugins:[
['import',{
libraryName:'vant',
libraryDirectory:'es',
style:true
},'vant']
]
};
//接着你可以在代码中直接引入Vant组件
//插件会自动将代码转化为方式二中的按需引入形式
import{Button}from'vant';
Rem适配
Rem适配
Vant中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具
postcss-pxtorem 是一款postcss插件，用于将单位转化为rem
lib-flexible 用于设置rem基准值
步骤
1.安装postcss-pxtorem
$npminstallpostcss-pxtorem--save-dev
2.安装lib-flexible
$npmi-Samfe-flexible||npminstall--savelib-flexible
3.在main.js中引入lib-flexible
import'lib-flexible';
4.在根目录新建postcss.config.js文件，在文件中进行配置
module.exports={
plugins:{
'autoprefixer':{
browsers:['Android>=4.0','iOS>=8']
},
'postcss-pxtorem':{
rootValue:37.5,
propList:['*']
}
}
}
vue-cli3中使用iconfont
下载iconfont到src/assets文件夹
在main.js中引用iconfont/iconfont.css
import'./assets/Iconfont/iconfont.css'
查看本地依赖中是否有sass-loader，如果没有需要安装一下
$npminstallcss-loader--save-dev
文件中使用
使用sass
npminstallsass-loader--save-dev
到此这篇关于vue-cli4.x创建企业级项目的方法步骤的文章就介绍到这了,更多相关vue-cli4.x创建企业级项目内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！