Vue學(xué)習(xí)之路 （一）

• • 1.引言
  • 2.更換npm國(guó)內(nèi)鏡像源
  • 3.用npm下載Vue
  • 4.Vue全家桶
  • 5.使用命令創(chuàng)建項(xiàng)目
  • 5.推薦插件
  • 6.推薦網(wǎng)站
  • 7.學(xué)習(xí)擴(kuò)展

1.引言

先安裝node.js環(huán)境,方便用里面的npm
，默認(rèn)安裝就行,安裝之后可以在cmd命令黑窗輸出
npm -V查看是否存在,順便看一下是什么版本

2.更換npm國(guó)內(nèi)鏡像源

因?yàn)閲?guó)外的比較慢,用這個(gè)命令設(shè)置為淘寶鏡像
npm config set registry https://registry.npm.taobao.org
設(shè)置完之后,可以查看設(shè)置成功了沒(méi)有。可以用
npm config get registry或npm config ls命令查詢

3.用npm下載Vue

安裝vue最新版本3.x
npm install vue@next

全局安裝 vue-cli
cnpm install -g @vue/cli
這里會(huì)有小伙伴疑惑,為什么下載兩個(gè),我來(lái)解釋一下
vue是一套框架，用于構(gòu)建用戶界面的漸進(jìn)式框架。
vue-cli相當(dāng)于腳手架， 給你自動(dòng)生成模板工程。

查看vue-cli當(dāng)前版本
vue --version
這里是4.x版本,因?yàn)関ue-cli通常會(huì)比vue高一個(gè)版本

4.Vue全家桶

1. Vue-cli(腳手架)
   (這里稍微簡(jiǎn)單說(shuō)一下,vue-cli因?yàn)闊岣绿?大點(diǎn)的項(xiàng)目要等很久,啟動(dòng)慢,所以才會(huì)有新的東西出現(xiàn)要替代他,Vite速度上比他快很多)
   Vue-cli和Vite區(qū)別
   (前者時(shí)間久,生態(tài)圈很廣,后者新生代,速度很快,生態(tài)圈偏窄)
   相信不久的以后Vite會(huì)慢慢替代Vue-cli
2. Vue-router(路由)
3. Vuex(狀態(tài)管理)
4. Axios(請(qǐng)求數(shù)據(jù))

5.使用命令創(chuàng)建項(xiàng)目

vue create vue-demo
回車，很慢要等很久,
先進(jìn)項(xiàng)目目錄cd vue-demo
再使用npm run serve(單詞這里結(jié)尾不是server)
他這里運(yùn)行成功之后大概就是這個(gè)樣子
App running at:

• Local: http://localhost:8081/
• Network: http://192.168.19.202:8081/

Note that the development build is not optimized.
To create a production build, run npm run build(這個(gè)是打包的命令).

回到項(xiàng)目目錄下使用命令
npm run build即可生成dist文件夾

5.推薦插件

• iview
• vant
• elementUI
• vue-element-admin

6.推薦網(wǎng)站

• 重置css樣式http://meyerweb.com/eric/tools/css/reset/
• 阿里圖標(biāo)庫(kù)https://www.iconfont.cn/

7.學(xué)習(xí)擴(kuò)展

推薦大家有時(shí)間可以學(xué)一下nuxt，react-native，angluar，flutter，node.js

學(xué)習(xí)之路很長(zhǎng),活到老,學(xué)到老.未完待續(xù),…

總結(jié)

以上是生活随笔為你收集整理的前端Vue学习之路(一)-初识Vue的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。