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

 更新时间:2020年06月18日 11:51:15   作者:郑正好  
这篇文章主要介绍了vue-cli4.x创建企业级项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

安装脚手架(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创建企业级项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-router动态设置页面title的实例讲解

    vue-router动态设置页面title的实例讲解

    今天小编就为大家分享一篇vue-router动态设置页面title的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue中引入使用patch-package为依赖打补丁问题

    Vue中引入使用patch-package为依赖打补丁问题

    这篇文章主要介绍了Vue中引入使用patch-package为依赖打补丁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程

    Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程

    这篇文章主要给大家介绍了关于Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程, 在开发中,如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,需要的朋友可以参考下
    2023-08-08
  • 说说如何使用Vuex进行状态管理(小结)

    说说如何使用Vuex进行状态管理(小结)

    这篇文章主要介绍了说说如何使用Vuex进行状态管理(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue3实现CSS无限无缝滚动效果

    vue3实现CSS无限无缝滚动效果

    这篇文章主要为大家详细介绍了vue3实现CSS无限无缝滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue-cli webpack 引入swiper的操作方法

    vue-cli webpack 引入swiper的操作方法

    今天小编就为大家分享一篇vue-cli webpack 引入swiper的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    这篇文章介绍了Vue.js中v-for指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue3中watch和watchEffect实战梳理

    vue3中watch和watchEffect实战梳理

    这篇文章主要介绍了vue3中watch和watchEffect实战梳理,watch和watchEffect都是vue3中的监听器,但是在写法和使用上是有区别的。下文介绍他们之间的方法及区别,需要的朋友可以参考一下
    2022-07-07
  • 使用wang-editor上传图片后端接收不到的问题解决

    使用wang-editor上传图片后端接收不到的问题解决

    这篇文章主要介绍了如何解决wang-editor 上传图片后端接收不到的问题,文中通过图文结合给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • 在vue中实现嵌套页面(iframe)

    在vue中实现嵌套页面(iframe)

    这篇文章主要介绍了在vue中实现嵌套页面(iframe),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论