人都傻了，搞了兩天一直報錯，才知道elementui是PC端的ui，不能用于小程序。
所以我要做兩個vue的練習(xí)項(xiàng)目，，，，又發(fā)現(xiàn)新大陸，小程序除了uniapp還有taro,又有新東西學(xué) 了

第一種PC端VUE+elementui
① npm init vue@latest
②npm install element-plus --save
順便說一句，如果安裝了一個不想要的包，在package.json里面刪掉然后重新npm 就可以了
③配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/main.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

④如果你遇到這種問題，請檢查你是否安裝了插件vetur，卸載它，vue3不支持這個

⑤照著寫進(jìn)頁面，然后運(yùn)行就可以了
https://element-plus.gitee.io/zh-CN/component/button.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
⑥如果使用圖標(biāo)的話，看這個，兩個步驟搞定
https://element-plus.gitee.io/zh-CN/component/icon.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8

第二種uniapp小程序+vant weapp組件
歷時三天，終于成功搭建，翻遍了別人的csdn終于慢慢的找到正確的路
所以我不允許還有人跟我一樣走彎路。
①全局安裝vue-cli,npm install -g @vue/cli
②新建一個文件夾npx degit dcloudio/uni-preset-vue#vite my-vue3-project，失敗的話就訪問這個https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip地址，或者直接用hbuilder創(chuàng)建項(xiàng)目。
。。。。如果你npm i報錯，那就用鏡像npm install cnpm -g --registry=https://registry.npmmirror.com
③項(xiàng)目創(chuàng)建好了，上這個地址下載文件https://github.com/youzan/vant-weapp。
把dist文件夾里的東西復(fù)制出來

④放在vant里面

⑤手動引入組件

"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index",
			"van-cell": "/wxcomponents/vant/cell/index",
			"van-cell-group": "/wxcomponents/vant/cell-group/index",
			"van-icon": "/wxcomponents/vant/icon/index",
			"van-image": "/wxcomponents/vant/image/index",
			"van-row": "/wxcomponents/vant/row/index",
			"van-col": "/wxcomponents/vant/col/index",
			"van-popup": "/wxcomponents/vant/popup/index",
			"van-toast": "/wxcomponents/vant/toast/index"
		}

⑥引入樣式，少了這一步打包的時候是不會把wxcomponents打包上的，這文件夾是自己創(chuàng)建的哈

⑦頁面上使用

⑧npm i
⑨打包
⑩運(yùn)行

運(yùn)行成功就會打包一個dist文件

2、打開微信開發(fā)者工具

導(dǎo)入文件的時候按上圖即可，有什么講究呢？因?yàn)檫@個文件夾里有一個app.json文件，這樣開發(fā)者工具才會認(rèn)，不然就報錯。

3、把這幾個視頻學(xué)完https://ke.qq.com/course/3169971/10920598598344371#term_id=103296764。不要錢

4、有幾個插件需要安裝，我用的vscode

5、去申請一個appid，入口：https://mp.weixin.qq.com/

成功之后登陸就可以了。
以上一個項(xiàng)目就可以開始寫了。

以下是2021年8月30日完筆
1.創(chuàng)建項(xiàng)目步驟
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli

版本低于3不能執(zhí)行vue init webpack vue_test (vue_test是自己的項(xiàng)目名字)
怎么辦？升級？
重裝node
步驟一：重裝，選擇安裝路徑的時候如果是C:\Program Files\nodejs，記住這個地址，下一個界面選擇add to path選項(xiàng)繼續(xù)；
安裝成功之后以管理員身份打開命令提示符

步驟二：改變環(huán)境變量

*打開path之后新建一個路徑為C:\Program Files\nodejs\node_global

*打開path之后，新增路徑C:\Program Files\nodejs\node_global\node_modules
步驟三：在安裝node的文件夾下新建兩個文件夾


步驟四：在cmd里面輸入npm config set prefix “C:\Program Files\nodejs\node_global”；
npm config set cache “C:\Program Files\nodejs\node_cache”；
接著輸入
npm install express -g
步驟五：npm install -g @vue/cli
如果不成功，一定要記住把以前安裝過node的文件夾刪掉，沒用的都刪掉，我的一開始報錯，然后我找到D盤nodejs里面安裝的文件刪了就好了。
步驟六：vue create -p dcloudio/uni-preset-vue my-project(my-projiect是項(xiàng)目名字），選擇hello uni app
成功之后會出現(xiàn)這個，按順序再輸入cmd就行，

運(yùn)行成功就是這樣


2.卸載vue cli的步驟：
npm uninstall -g vue-cli
npm uninstall -g @vue/cli

————————手動分割線————————————
接下來是在hbuilderX里面操作了
步驟一：打開之前安裝的文件夾（我的名字叫my-project）
然后運(yùn)行
第一次運(yùn)行會遇到一些問題
首先打開微信開發(fā)者工具，把端口打開


然后在項(xiàng)目里面打開src文件夾里面的manifest.json文件，輸入iD,我用的測試號，如下圖


配置完成之后再次運(yùn)行就沒問題了

如果報錯Uncaught TypeError: Cannot delete property ‘WeixinJSBridge’ of #< Window >

多改幾次低版本，我用的17版就可以了
如果要用第三方比如百度地圖api在小程序上，首先在百度地圖申請一個key,然后按如下步驟

————————————————手動分割————————————
知識點(diǎn)總結(jié)：
1.底部導(dǎo)航欄的這個標(biāo)題是規(guī)定的用tabBar
2.改小程序的名字

3.app.json文件里是路由的設(shè)置，放在第一行的路由就是首頁
4.每個vue文件的根節(jié)點(diǎn)必須為 < template >，且這個 < template > 下只能且必須有一個根 < view > 組件。
5.uni-app的組件，分為基礎(chǔ)組件和擴(kuò)展組件。
6.onload是小程序加載，onready是頁面加載

     onLoad: function(option) {
		option可以拿到另一個頁面?zhèn)鱽淼膮?shù)
		},

7.config文件夾下的api文件放的內(nèi)容是接口
8.data里的變量用this.name 就能在方法里改動this.name=1；如果在success方法里面，this.name要變成that.name，在方法里要加上that=this
9.靜態(tài)資源放在static文件夾里
10.代碼里如果要用變量的值寫法為：{{baoxiuma}}，如果要寫在標(biāo)簽里，在屬性前加冒號，比如

<picker :value="index" ></picker>

index就是一個變量
11.想顯示和隱藏一個元素的話

<view v-show="zhi">
這個zhi為true或者false
</view>

12.樣式就是class=“name’，然后在style里面去寫樣式，有很多樣式只能在view組件里寫
13.事件方法@click=“repair”，很多特定組件里也有自己的方法比如@change,@success。。。；如果要帶參數(shù)@click=“detail(name)”，這個參數(shù)可以是定量也可以是變量，在method里寫方法的時候也是在后面打個括號即可，命名不用一樣
14.如果想遍歷元素

<view v-for="(item,index) in list" :key="index"></view>

list是一個數(shù)組變量；index是數(shù)組里的唯一標(biāo)識；然后內(nèi)容就取item.屬性名即可
15.表格中uni-table在uni-th里直接寫width=“”就可以控制表格一列的寬度
16.在data定義的對象可以直接使用{{對象.屬性名}}
17.如果拉取倉庫分支的代碼時需要安裝依賴，npm install之后運(yùn)行不成功，可能考慮是和分支上的npm版本不一致，將本地的npm版本改為一致的就行npm install npm@版本號 -g文章來源地址http://www.zghlxwxcb.cn/news/detail-778371.html

到了這里，關(guān)于Vue+elementui和uniapp小程序+vant weapp的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！