vue3.0環境配置和項目初始化


環境配置

使用編譯器:

JetBrains webStorm

安裝node.js: https://nodejs.org/en/

  1. 我的安裝路徑為D:\Program Files\nodejs\
  2. 查看版本號 node -v npm -v
  3. 環境變量配置:系統變量里的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的特點:

  1. 速度快:並行下載,緩存下載過的包,當安裝包可直接從緩存讀取。
  2. 超級安全:在執行代碼之前,Yarn 會通過算法校驗每個安裝包的完整性。
  3. 超級可靠:使用詳細、簡潔的鎖文件格式和明確的安裝算法,Yarn 能夠保證在不同系統上無差異的工作。

全局安裝Vue3.x腳手架:

npm install -g @vue/cli 
vue -V // 查看vue版本,注意大寫的V

Webpack是一個模塊化打包工具,專注於構建模塊化項目,在Webpack眼里一切文件都是模塊,通過Loader轉換翻譯文件,通過Plugin注入鈎子,最后輸出由多個模塊組合成的文件。之所以一切文件皆模
塊,如:JavaScript、CSS、SCSS以及圖片等資源,在Webpack眼中都是模塊,因為這樣可以更好的理清描述各個模塊之間的依賴關系,方便Webpack對模塊進行打包組合,輸出瀏覽器使用的靜態資源。

構建一個初始化項目

  1. win + r 輸入cmd,cd 進入要安裝的文件
  2. 安裝命令:
vue create [項目名]
  1. 選擇相應的模塊進入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

我的電腦環境版本


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM