vue腳手架使用vant

2021-10-02 14:58:43 字數 756 閱讀 8057

由於公司最近開發移動端專案,我就學習了下vant來自有讚的 元件庫 我就把自己的學習經驗分享下

1.首先你要是使用vant腳手架就得先安裝

npm i vant -d/-s    -d 是開發環境下使用  -s  是生產環境下需要  我們的vant是包括上線之後還是要使用所以 是 -s

我們再使用的時候也是有倆種方式

一.全部引入

在安裝完之後  

import vant from 'vant'

import 'vant/lib/index.css'

vue.use(vant)

這樣的話 我們就可以再每個元件中使用了, 就可以再頁面上看到效果了

我只是拿了倆個 例子 其他的元件 建議參考官網

按需引入

2.1.先裝乙個babel的外掛程式包

npm i babel-plugin-import -d

2.2.在腳手架專案下的 babel.config.js檔案中加入下面的**

plugins: [

'import',

libraryname: 'vant',

librarydirectory: 'es',

style: true

'vant'

2.3,引入vant元件  在main.js檔案中

import  from 'vant'

vue.use(button).use(icon)   // 可以鏈式操作  然後就可以在各個元件中使用了 使用和全部引入的方式一樣

Vue腳手架使用

安裝 1.全域性安裝腳手架 cnpm install g vue cli 使用 2.新建資料夾,在當前目錄執行命令 vue create 專案名稱 3.配置 選擇manually select feautures 空格選擇babel和css pre procesors 選擇sass scss wit...

vue腳手架的使用

安裝 1.全域性安裝腳手架 cnpm install g vue cli 使用 2.新建資料夾,在當前目錄執行命令 vue create 專案名稱 3.配置 選擇manually select feautures 空格選擇babel和css pre procesors 選擇sass scss wit...

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...