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 相關提示