建構vue項目

# nodejs安裝：https://www.runoob.com/nodejs/nodejs-install-setup.html
# 打開cmd指令行工具，驗證node、npm是否安裝成功
  node -v 
  npm -v 

# 檢視npm全局的安裝路徑
npm config get prefix

# 使用npm安裝yarn
  npm install -g yarn 
# 驗證是否安裝成功
  yarn -v 

# 安裝cnpm
  npm install -g cnpm --registry.npm.taotao.org
# 檢視版本
  cnpm -v

# 安裝vue-cli
  cnpm install -g @vue/cli
# 檢視版本
  vue --version    

# 安裝打包工具
  cnpm install -g webpack
# 檢視版本
  npx webpack -v

# 安裝json-serve，用于模拟後端服務
  npm install -g json-server 
# 編寫json檔案
  json-server --watch db.json
# 啟動項目必須在json所在檔案夾啟動

# 安裝ts
  npm install typescript -g
# 檢視版本
  tsc

# 安裝vite
npm install vite -g
vite -v

# 安裝create-vite
npm install create-vite -g      

• 局部安裝依賴

npm install xxx –-save
  cnpm uninstall xxx --save
      

• 解除安裝依賴

# 打開終端解除安裝
  npm uninstall --save xxx           
  npm remove xxx
      

• 開發依賴和運作依賴

# 安裝到運作依賴
  npm install xxx –-save       
# 安裝到開發依賴
  npm install xxx -–save-dev
# 打開項目的package.json檔案，dependencies表示運作依賴，devDependencies表示開發依賴
      

建構項目

• ​

  ​vue-cli建構vue2​

  ​​​參考​​
• ​

  ​vue-cli建構vue3​

  ​

點選檢視詳細步驟

• 

• 

• 

• 

• 

• 

• 

• 

• 建構完成

• 

• 用編輯器打開項目檔案夾，對項目初始化



• 打開終端使用指令安裝依賴

  npm install less

  npm install [email protected]

• 因為目前項目是用cli腳手架建構的，是以每次可用cmd輸入​

  ​vue ui​

  ​打開vue控制台
• 可在控制台搜尋添加插件、安裝依賴、運作編譯項目等







• 啟動項目後報錯：
• 錯誤原因：ts和element ui沖突
• 解決方案：删除ts或element ui







• ​

  ​vite1建構vue3​

  ​​​參考​​

# 安裝vite
  cnpm i create-vite-app 
# 使用vite1建立vue3項目
  npm init vite-app vue_test
# 進入項目根目錄
  cd vue_test
# 下載下傳依賴
  npm install
# 啟動項目
  npm run dev
      

• ​

  ​vite2建構vue3​

  ​​​參考​​