2. vite 構建專案

khalil12138發表於2024-08-03
Vite

目錄
  • vite 構建專案
    • 1 安裝node.js
    • 2 建立專案
    • 3 專案部署
    • 4 vue-router元件
      • 4.1 建立專案
      • 4.2 router-link指定路由

vite 構建專案

1 安裝node.js

下載連結
https://nodejs.p2hp.com/
版本需大於 18.0

檢視版本

node -v

新增環境變數

npm（包管理工具, 類似於python的pip）

npm -g (檢視包安裝位置)
npm install (安裝在專案的node_model下)
npm install -g (全域性安裝 安裝到系統路徑)

注意源：
官方源

npm config set registry https://registry.npmjs.org/

推薦

npm config set registry=https://registry.npmmirror.com

2 建立專案

npm create vue@latest
  • 輸入專案名稱
  • 一路否
  • 建立成功
  cd 專案
  npm install
  npm run dev

3 專案部署

  • 編譯
  npm run build
  • 獲得程式碼dist & 將他放到伺服器上
  • 安裝nginx & 配置
yum install nginx -y

配置檔案 /etc/nginx/nginx.conf
啟動

  >>>systemctl start nginx
  >>>systemctl restart nginx
  • 檢視效果

4 vue-router元件

單頁面應用，專案就一個頁面。

4.1 建立專案

npm install vue-router@4

手動加配置檔案
或

npm create vue@latest

4.2 router-link指定路由

<router-link to="/course">課程</router-link>
<RouterLink to="/course">課程</RouterLink>
<RouterLink :to="{name:'course'}">課程</RouterLink>
<RouterLink :to="{path:'/course'}">課程</RouterLink>

相關文章