vue-cli4.x创建企业级项目的方法步骤


Posted in Javascript onJune 18, 2020

安装脚手架(vue-cli)

$ npm install @vue/cli -g //全局安装最新的脚手架

创建项目

$ vue create vue-demo

在创建项目的时候可以使用

$ vue ui

来进行创建,两种方式在创建的时候,直接选择上router和vuex,来进行项目创建

移动端Vant

# 通过 npm 安装
$ npm i vant -S

# 通过 yarn 安装
$ yarn add vant

我这里都是使用的按需引入,用了
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

安装插件

npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 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

$ npm install postcss-pxtorem --save-dev

2.安装lib-flexible

$ npm i -S amfe-flexible || npm install --save lib-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,如果没有需要安装一下

$ npm install css-loader --save-dev

文件中使用

<i class="iconfont iconsearch"></i>

使用sass

npm install sass-loader --save-dev

到此这篇关于vue-cli4.x创建企业级项目的方法步骤的文章就介绍到这了,更多相关vue-cli4.x创建企业级项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
javascript实现文字跑马灯效果
Jun 18 #Javascript
node.js +mongdb实现登录功能
Jun 18 #Javascript
VSCode launch.json配置详细教程
Jun 18 #Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 #Javascript
通过实例了解JS执行上下文运行原理
Jun 17 #Javascript
从0搭建vue-cli4脚手架
Jun 17 #Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
Python读取Excel的方法实例分析
2015/07/11 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python如何将装饰器定义为类
2020/07/30 Python
项目合作意向书范本
2014/04/01 职场文书
班级寄语大全
2014/04/10 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
运动员入场前导词
2015/07/20 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
MySQL的索引你了解吗
2022/03/13 MySQL