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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
layui表格实现代码
May 20 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
Vue-cli3多页面配置详解
Mar 22 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php发送post请求的三种方法
2014/02/11 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
用 javascript 实现的点击复制代码
2007/03/24 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python正则表达式面试题解答
2020/04/28 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
从0开始的Python学习016异常
2019/04/08 Python
Django获取应用下的所有models的例子
2019/08/30 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
django 读取图片到页面实例
2020/03/27 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
七一党建活动方案
2014/01/28 职场文书
支部鉴定材料
2014/06/02 职场文书
数学备课组工作总结
2015/08/12 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python