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 相关文章推荐
js导航菜单(自写)简单大方
Mar 28 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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
使用php来实现网络服务
2009/09/15 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python 异或加密字符串的实例
2018/10/14 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Python实现序列化及csv文件读取
2020/01/19 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python进行统计建模
2020/08/10 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
好家长事迹材料
2014/01/23 职场文书
化妆品促销方案
2014/02/24 职场文书
建筑工地宣传标语
2014/06/18 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年体育工作总结
2014/11/24 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL