1 vs 編輯器官方擴充套件外掛 Volar

點開連結，直接安裝 ，會調起vscode
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

2 node js 安裝 ，專案建立

   1 下載node-js . [我下載的穩定版,不折騰]
  裝玩後 node -v
  #現在玩的是vue3 ,建議使用vite 建立專案.
  
  在vscode 的terminal 下。
  npm init @vitejs/app
  /**
  按提示輸入 ，建立專案目錄。 以demo 為例
  後兩個選vue .
  */
  
  cd demo
  npm install
  npm run dev

成功後，提示你 訪問 http://localhost:3000

  
 

安裝後，效果如圖.

#初始化專案後的檔案結構
.
├── README.md
├── index.html           入口檔案
├── package.json
├── public               資原始檔
│   └── favicon.ico
├── src                  原始碼
│   ├── App.vue          單檔案元件
│   ├── assets
│   │   └── logo.png
│   ├── components   
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置檔案

想改程式碼，就直接雲 HelloWord.vue 裡面

 

3 一個基於vue 專案的demo

進一步的，安裝 vue-router ,Vuex

npm install vue-router@next vuex@next

專案資料夾規範：

├── src
│   ├── api            資料請求
│   ├── assets         靜態資源
│   ├── components     元件
│   ├── pages          頁面
│   ├── router         路由配置
│   ├── store          vuex資料
│   └── utils          工具函式

一個例項：

1 建pages

 在pages 下分別新建 about.vue home.vue
 
<template>
    <h1>這是關於頁面</h1>
</template>
 
 
<template>
    <h1>這是關於頁面</h1>
</template>
  
 

2 main.js 加上route 模組 (後面具體講route)

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'
createApp(App)
    .use(router)
    .mount('#app')

3 修改 App.vue

<template>
  <div>
    <router-link to="/">首頁</router-link> | 
    <router-link to="/about">關於</router-link>
  </div>
  <router-view></router-view>
</template>

實際效果如下

4 what's more.

*當然這樣還不夠，我們在實際專案開發中還會有各種工具的整合，比如寫 CSS 程式碼時，我們需要預處理工具 stylus 或者 sass；元件庫開發中，我們需要 Element3 作為元件庫；網路請求後端資料的時候，我們需要 Axios。對於團隊維護的專案，工具整合完畢後，還要有嚴格的程式碼規範。我們需要 Eslint 和 Prettier 來規範程式碼的格式，Eslint 和 Prettier 可以規範專案中 JavaScript 程式碼的可讀性和一致性。程式碼的管理還需要使用 Git，我們預設使用 GitHub 來託管我們的程式碼。此外，我們還會使用 commitizen 來規範 Git 的日誌資訊。對於我們專案的基礎元件，我們還會提供單元測試來確保程式碼質量和可維護性，最後我們還會配置 GitHub Action 來實現自動化的部署。最後這個專案的架構大概是下面這樣，這就是一個足以應對複雜專案開發的架構了
*

更選複雜的專案開發架構