Vue學習之路 （一）

• • 1.引言
  • 2.更換npm國內鏡像源
  • 3.用npm下載Vue
  • 4.Vue全家桶
  • 5.使用命令創建項目
  • 5.推薦插件
  • 6.推薦網站
  • 7.學習擴展

1.引言

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

2.更換npm國內鏡像源

因為國外的比較慢,用這個命令設置為淘寶鏡像
npm config set registry https://registry.npm.taobao.org
設置完之后,可以查看設置成功了沒有。可以用
npm config get registry或npm config ls命令查詢

3.用npm下載Vue

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

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

查看vue-cli當前版本
vue --version
這里是4.x版本,因為vue-cli通常會比vue高一個版本

4.Vue全家桶

1. Vue-cli(腳手架)
   (這里稍微簡單說一下,vue-cli因為熱更新太慢,大點的項目要等很久,啟動慢,所以才會有新的東西出現要替代他,Vite速度上比他快很多)
   Vue-cli和Vite區別
   (前者時間久,生態圈很廣,后者新生代,速度很快,生態圈偏窄)
   相信不久的以后Vite會慢慢替代Vue-cli
2. Vue-router(路由)
3. Vuex(狀態管理)
4. Axios(請求數據)

5.使用命令創建項目

vue create vue-demo
回車，很慢要等很久,
先進項目目錄cd vue-demo
再使用npm run serve(單詞這里結尾不是server)
他這里運行成功之后大概就是這個樣子
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(這個是打包的命令).

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

5.推薦插件

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

6.推薦網站

• 重置css樣式http://meyerweb.com/eric/tools/css/reset/
• 阿里圖標庫https://www.iconfont.cn/

7.學習擴展

推薦大家有時間可以學一下nuxt，react-native，angluar，flutter，node.js

學習之路很長,活到老,學到老.未完待續,…

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。