快捷導(dǎo)航

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

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

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

安裝腳手架（vue-cli）

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

創(chuàng)建項目

$ vue create vue-demo

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

$ vue ui

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

移動端Vant

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

# 通過 yarn 安裝
$ yarn add vant

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

安裝插件

npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 無需設(shè)置 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 組件
// 插件會自動將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { Button } from 'vant';

Rem 適配

Rem 適配

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

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文件，在文件中進行配置

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è)級項目的方法步驟的文章就介紹到這了,更多相關(guān)vue-cli4.x創(chuàng)建企業(yè)級項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: