安裝腳手架（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建立企業級專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！