安装脚手架(vue-cli)
创建项目
在创建项目的时候可以使用
$ vue ui来进行创建,两种方式在创建的时候,直接选择上router和vuex,来进行项目创建
移动端Vant
我这里都是使用的按需引入,用了
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
安装插件
Rem 适配
Rem 适配
Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具
postcss-pxtorem 是一款postcss插件,用于将单位转化为rem
lib-flexible 用于设置rem基准值
步骤
1.安装postcss-pxtorem
$ npm install postcss-pxtorem --save-dev2.安装lib-flexible
$ npm i -S amfe-flexible || npm install --save lib-flexible3.在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,如果没有需要安装一下
$ npm install css-loader --save-dev文件中使用
<i class="iconfont iconsearch"></i>使用sass
到此这篇关于vue-cli4.x创建企业级项目的方法步骤的文章就介绍到这了,更多相关vue-cli4.x创建企业级项目内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!