uni-app參照框架的方法:1、將uview-ui資料夾複製出來放在專案的根目錄下;2、安裝SCSS外掛;3、執行「npm init -y」命令;4、引入uView主JS庫;5、設定easycom元件模式。
本教學操作環境:windows7系統、uni-app2.5.1版,DELL G3電腦。
uni-app怎麼參照框架?
在uni-app中引入uview-ui框架
方法1:通過hbuilder直接建立的uni-app專案
1、安裝
1)uview-ui
外掛下載地址:https://ext.dcloud.net.cn/plugin?id=1593
此下載的是一個新專案,可單獨將其中的uview-ui資料夾複製出來放在你的專案的根目錄下
2)SCSS
uView依賴SCSS,您必須要安裝此外掛,否則無法正常執行。
安裝方法:HX選單的 工具->外掛安裝中找到"scss/sass編譯"外掛進行安裝, 如不生效,重新啟動HX即可
3)package.json
// 如果您的專案是HX建立的,根目錄又沒有package.json檔案的話,請先執行如下命令: // npm init -y
2、設定
1)引入uView主JS庫
在專案根目錄中的main.js中,引入並使用uView的JS庫,注意這兩行要放在import Vue之後。
// main.js import uView from "uview-ui"; Vue.use(uView);
2)在引入uView的全域性SCSS主題檔案
在專案根目錄的uni.scss中引入此檔案。
/* uni.scss */ @import 'uview-ui/theme.scss';
3)引入uView基礎樣式
注意!
在App.vue中style部分首行的位置引入,注意給style標籤加入lang="scss"屬性
溫馨提示
由於uView的內建樣式均是寫在scss檔案中的,您在使用的時候,請確保要給頁面的style標籤加上lang="scss"屬性,否則可能會報錯。
<style> /* 注意要寫在第一行,同時給style標籤加入lang="scss"屬性 */ @import "uview-ui/index.scss"; </style>
4)設定easycom元件模式
此設定需要在專案根目錄的pages.json中進行。
溫馨提示
uni-app為了偵錯效能的原因,修改easycom規則不會實時生效,設定完後,您需要重新啟動HX或者重新編譯專案才能正常使用uView的功能。
請確保您的pages.json中只有一個easycom欄位,否則請自行合併多個引入規則。
// pages.json { "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }, // 此為本身已有的內容 "pages": [ // ...... ] }
3、頁面使用
通過npm和下載方式的設定之後,在某個頁面可以直接使用元件,無需通過import引入元件。
<template> <u-action-sheet :list="list" v-model="show"></u-action-sheet> </template> <script> export default { data() { return { list: [{ text: '點贊', color: 'blue', fontSize: 28 }, { text: '分享' }, { text: '評論' }], show: true } } } </script>
方法2:專案是由vue-cli模式建立的
1、安裝
1)uview-ui
方法1 直接下載檔案包:
外掛下載地址:https://ext.dcloud.net.cn/plugin?id=1593
此下載的是一個新專案,可單獨將其中的uview-ui資料夾複製出來放到專案的src資料夾中即可。
方法2 npm安裝
npm install uview-ui
2)scss
// 安裝node-sass npm i node-sass -D // 安裝sass-loader npm i sass-loader -D
3)package.json
// 如果您的專案是HX建立的,根目錄又沒有package.json檔案的話,請先執行如下命令: // npm init -y
2、設定
1)引入uView主JS庫
在專案根目錄中的main.js中,引入並使用uView的JS庫,注意這兩行要放在import Vue之後。
// main.js import uView from "uview-ui"; Vue.use(uView);
2)在引入uView的全域性SCSS主題檔案
在專案根目錄的uni.scss中引入此檔案。
/* uni.scss */ @import 'uview-ui/theme.scss';
3)引入uView基礎樣式
注意!
在App.vue中style部分首行的位置引入,注意給style標籤加入lang="scss"屬性
<style> /* 注意要寫在第一行,同時給style標籤加入lang="scss"屬性 */ @import "uview-ui/index.scss"; </style>
4)設定easycom元件模式
此設定需要在專案根目錄的pages.json中進行。
溫馨提示
uni-app為了偵錯效能的原因,修改easycom規則不會實時生效,設定完後,您需要重新啟動HX或者重新編譯專案才能正常使用uView的功能。
請確保您的pages.json中只有一個easycom欄位,否則請自行合併多個引入規則。
// pages.json { "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }, // 此為本身已有的內容 "pages": [ // ...... ] }
3、頁面使用
通過npm和下載方式的設定之後,在某個頁面可以直接使用元件,無需通過import引入元件。
<template> <u-action-sheet :list="list" v-model="show"></u-action-sheet> </template> <script> export default { data() { return { list: [{ text: '點贊', color: 'blue', fontSize: 28 }, { text: '分享' }, { text: '評論' }], show: true } } } </script>
推薦:《》
以上就是uni-app怎麼參照框架的詳細內容,更多請關注TW511.COM其它相關文章!