快捷導(dǎo)航

vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目的方法步驟

更新時(shí)間：2020年06月18日 11:51:15 作者：鄭正好

這篇文章主要介紹了vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

安裝腳手架（vue-cli）

$ npm install @vue/cli -g //全局安裝最新的腳手架

創(chuàng)建項(xiàng)目

$ vue create vue-demo

在創(chuàng)建項(xiàng)目的時(shí)候可以使用

$ vue ui

來進(jìn)行創(chuàng)建，兩種方式在創(chuàng)建的時(shí)候，直接選擇上router和vuex，來進(jìn)行項(xiàng)目創(chuàng)建

移動(dòng)端Vant

# 通過 npm 安裝
$ npm i vant -S

# 通過 yarn 安裝
$ yarn add vant

我這里都是使用的按需引入，用了
babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式

安裝插件

npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 無需設(shè)置 libraryDirectory
{
 "plugins": [
  ["import", {
   "libraryName": "vant",
   "libraryDirectory": "es",
   "style": true
  }]
 ]
}

// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
 plugins: [
  ['import', {
   libraryName: 'vant',
   libraryDirectory: 'es',
   style: true
  }, 'vant']
 ]
};
// 接著你可以在代碼中直接引入 Vant 組件
// 插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { Button } from 'vant';

Rem 適配

Rem 適配

Vant 中的樣式默認(rèn)使用px作為單位，如果需要使用rem單位，推薦使用以下兩個(gè)工具

postcss-pxtorem 是一款postcss插件，用于將單位轉(zhuǎn)化為rem
lib-flexible 用于設(shè)置rem基準(zhǔn)值

步驟

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文件，在文件中進(jìn)行配置

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

到此這篇關(guān)于vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目的方法步驟的文章就介紹到這了,更多相關(guān)vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue-router動(dòng)態(tài)設(shè)置頁面title的實(shí)例講解
今天小編就為大家分享一篇vue-router動(dòng)態(tài)設(shè)置頁面title的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue中引入使用patch-package為依賴打補(bǔ)丁問題
這篇文章主要介紹了Vue中引入使用patch-package為依賴打補(bǔ)丁問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue項(xiàng)目中大文件切片上傳實(shí)現(xiàn)秒傳與斷點(diǎn)續(xù)傳的詳細(xì)實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中大文件切片上傳實(shí)現(xiàn)秒傳與斷點(diǎn)續(xù)傳的詳細(xì)實(shí)現(xiàn)過程, 在開發(fā)中,如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進(jìn)行上傳,將各個(gè)文件的切片傳遞給后臺(tái),然后后臺(tái)再進(jìn)行合并,需要的朋友可以參考下
2023-08-08
說說如何使用Vuex進(jìn)行狀態(tài)管理(小結(jié))
這篇文章主要介紹了說說如何使用Vuex進(jìn)行狀態(tài)管理(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue3實(shí)現(xiàn)CSS無限無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)CSS無限無縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue-cli webpack 引入swiper的操作方法
今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue.js中v-for指令的用法介紹
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
vue3中watch和watchEffect實(shí)戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實(shí)戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下
2022-07-07
使用wang-editor上傳圖片后端接收不到的問題解決
這篇文章主要介紹了如何解決wang-editor 上傳圖片后端接收不到的問題，文中通過圖文結(jié)合給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
在vue中實(shí)現(xiàn)嵌套頁面(iframe)
這篇文章主要介紹了在vue中實(shí)現(xiàn)嵌套頁面(iframe)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07