年少不知Vue的好,錯把layui當成寶 不用太在意這句話,只是我的感慨 1.安裝與配置: 在HBuilderX創建Uniapp項目,可以不用啟動uniCloud,Vue的版本隨意選擇即可,常用vue2.x。 根據官方文檔的提示,安裝uview。 點擊紅框中的按鈕打開終端。 執行如下的命令: npm ...
年少不知Vue的好,錯把layui當成寶
不用太在意這句話,只是我的感慨
1.安裝與配置:
在HBuilderX創建Uniapp項目,可以不用啟動uniCloud,Vue的版本隨意選擇即可,常用vue2.x。
根據官方文檔的提示,安裝uview。
點擊紅框中的按鈕打開終端。
執行如下的命令:
npm init -y
npm install [email protected]
可以看到新增了兩個文件
打開官方文檔npm的配置項,根據文檔提示安裝好對應的插件。
根據官方文檔的提示,在main.js
文件在import Vue
之後加入如下代碼
import uView from "uview-ui";
Vue.use(uView);
在uni.scss
文件加入如下的代碼(可以選擇清空其餘的預設樣式)
@import 'uview-ui/theme.scss';
在根目錄下點擊App.vue
文件下style,引入scss的基礎樣式。
<style lang="scss">
/* 註意要寫在第一行,同時給style標簽加入lang="scss"屬性 */
@import "uview-ui/index.scss";
</style>
之前通過init -y
命令新建了pages.json
文件的在pages
數組上新增欄位。
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
pages/index/index.vue
:修改template模板,新加icon圖標
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<u-icon name="photo"></u-icon>
</view>
</template>
測試
選擇自己想要的瀏覽器。
可以看到有圖片的圖標了,證明uview組件成功渲染。
2. 問題:為什麼uView的組件無法使用?
有些新手小白可能是第一次用(像我一樣),明明跟著官方文檔的步驟來了,可不知道為什麼就不能顯示自己用的uview
組件。
打開瀏覽器的開發者工具也提示:
u-icon If this is a native custom element, make sure to exclude it from comp
其實這是因為你沒有在HbuilderX中配置好node的路徑,工具->設置->允許配置
。
另外我本人經過測試,你也可以在官網提供的github地址選擇本地下載uview
組件包後,再按照官方文檔的提示修改pages.json
文件的easycom
路徑,註意一定要對得上路徑,不然會無效的。