Vue3 - 環境安裝和啟動配置


Node.js 和 NPM

獨立安裝 Node.js 和 Npm(安裝 Node.js即會安裝 npm),查看版本

node -v
npm -v

淘寶鏡像

npm 如需淘寶鏡像可安裝 cnpm(非必須)

npm install -g cnpm --registry=https://registry.npm.taobao.org

引用或安裝Vue3

引用方式最為簡單,在 html 文件中加入 vue 的引用即可,地址基於隨筆時最新版本,引用時按實際URL修改

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.js"></script>

安裝方式為打開控制台,運行命令安裝 vue-cli 工具,當前最新版本4.5.12,如需升級或重裝,最好卸載已有vue-cli並重啟后再進行安裝

npm install -g @vue/cli@next
vue --version

構建一個Vue3項目

在成功安裝 vue-cli 之后即可使用 Vue3 帶來的新工具 Vite 構建示例項目,方法一,先獨立安裝 Vite

npm install -g create-vite-app

方法二,初始化項目時安裝 Vite,會自動先安裝 Vite 后創建項目比較方便。新建一個叫做 nothing 的項目,按提示鍵入 y 確認安裝 Vite,安裝並創建成功后提示運行命令。

  • cd nothing 進入目錄
  • code . 使用 vs code 打開項目目錄
  • npm install 初始化項目,添加默認的依賴
  • npm run serve 運行服務,啟動項目
npm init vite-app nothing

// 控制台輸出
Need to install the following packages:
  create-vite-app
Ok to proceed? (y) y
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in D:\Home\Repos\vue3\nothing...

Done. Now run:

  cd nothing
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

可以使用默認的 npm run serve 來啟動項目,也可以使用更快的 Vite 來啟動項目,鍵入 npm run dev 使用 Vite 啟動並輸出結果

npm run dev

> nothing@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.168.0.192:3000/
  > Network:  http://192.168.137.1:3000/
  > Network:  http://192.168.116.1:3000/
  > Local:    http://localhost:3000/

頁面

如啟動提示,在瀏覽器中運行本地地址打開 Vue3.x 歡迎頁面即成功

Visual Code

vs code 插件安裝了 Vetur、Vue 3 Pack(hollowtree),在 components 下新建 Add.vue,鍵入 vbase 有了 Vue3 相關提示


免責聲明!

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



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