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搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
js new Date()实例测试
Oct 31 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP 验证码的实现代码
2011/07/17 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
Android面试宝典
2013/08/06 面试题
美丽乡村建设实施方案
2014/03/23 职场文书
公司授权委托书
2014/10/17 职场文书
技术支持岗位职责
2015/02/13 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
JavaScript的Set数据结构详解
2022/02/18 Javascript
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技