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 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
AJAX实现省市县三级联动效果
Oct 16 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
基于mysql的论坛(2)
2006/10/09 PHP
PHP如何编写易读的代码
2007/07/10 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
matplotlib作图添加表格实例代码
2018/01/23 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
物业管理个人自我评价
2013/11/08 职场文书
军训自我鉴定范文
2014/02/13 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
单位收入证明范本
2015/06/18 职场文书
网吧温馨提示
2015/07/17 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS