環境配置
使用編譯器:
JetBrains webStorm
安裝node.js: https://nodejs.org/en/
- 我的安裝路徑為D:\Program Files\nodejs\
- 查看版本號 node -v npm -v
- 環境變量配置:系統變量里的path新建一個環境變量加入D:\Program Files\nodejs\
npm 安裝包比較慢,所以推薦使用cnpm 和 yarn 包管理器,使用cnpm可能里面包更新不及時或者出現一些未知的錯誤,我一般選用yarn來進行依賴包安裝
安裝淘寶鏡像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用命令 cnpm + 功能,與npm相似
全局安裝yarn:
npm install -g yarn
// 查看 yarn 的版本
yarn -v
yarn使用方法介紹:https://yarn.bootcss.com/docs/usage/
yarn的特點:
- 速度快:並行下載,緩存下載過的包,當安裝包可直接從緩存讀取。
- 超級安全:在執行代碼之前,Yarn 會通過算法校驗每個安裝包的完整性。
- 超級可靠:使用詳細、簡潔的鎖文件格式和明確的安裝算法,Yarn 能夠保證在不同系統上無差異的工作。
全局安裝Vue3.x腳手架:
npm install -g @vue/cli
vue -V // 查看vue版本,注意大寫的V
Webpack是一個模塊化打包工具,專注於構建模塊化項目,在Webpack眼里一切文件都是模塊,通過Loader轉換翻譯文件,通過Plugin注入鈎子,最后輸出由多個模塊組合成的文件。之所以一切文件皆模
塊,如:JavaScript、CSS、SCSS以及圖片等資源,在Webpack眼中都是模塊,因為這樣可以更好的理清描述各個模塊之間的依賴關系,方便Webpack對模塊進行打包組合,輸出瀏覽器使用的靜態資源。
構建一個初始化項目
- win + r 輸入cmd,cd 進入要安裝的文件
- 安裝命令:
vue create [項目名]
- 選擇相應的模塊進入vue項目的初始化
第一個為vue2.0版本,第二個為vue.3.0的版本,選擇其中的任何一個項目都會自動進行默認配置
第三個為自定義選項,可自由配置項目的一些特性,按住空格鍵進行選擇,我創建項目選擇如下,如果是要使用TypeScript進行開發的,可勾選
vue 版本的選擇,這里選擇的是vue3.x Preview
我的預設選擇如下,項目中如果用不到sass,可選擇less
啟動項目
cd [項目名]
yarn serve
項目配置文件
在項目下新建vue.config.js
該文件文檔介紹地址:https://cli.vuejs.org/zh/config/
vue3.0學習文檔地址
vue3.0: https://www.vue3js.cn/docs/zh/
element-plus優秀的PC端UI設計庫: https://element-plus.org/#/zh-CN/component/installation
Vant Weapp手機移動端和微信小程序: https://youzan.github.io/vant-weapp/#/intro