工欲善其事必先利其器

前序：

• VUE-官網-3.X

前提：

• 鑒于web的直觀性和多樣性，更多是選擇web而不是控制臺創(chuàng)建項目，當然后續(xù)生產上更多是不變的模板加工具快速創(chuàng)建
• 和2.X步驟差不多，僅多了版本切換選擇
• windos7及以上版本（linux或max環(huán)境下的，請自行找教程，大同小異）
• vscode（當然記事本也可，版本不限，只是可能會與本文不太一樣，既然記事本都可以，那就不用多于關心這些了，只是可能開發(fā)效率沒有那么高而已）
• Vue CLI 4.5 +（當前版本 v4.5.8，特別要注意，若不是這個，慎重看此文）
• Node.js （本文當前版本 v12.18.3，node的適用版本也需要注意）未安裝請看其他相關教程，此文默認已安裝
• 搬運官網文檔的三種安裝方式，其中靈活性依然為cli和web，新手推薦web，vite沒有相關的選擇，簡潔模板可以選擇它，或者自己創(chuàng)建好，然后利用版本工具作為模板快速共享均可

一：步驟：

1 —— 命令行方式創(chuàng)建項目：

前奏 —— 使用npm（依賴包管理工具）安裝 Vue CLI

      // 若已安裝，除非版本一致，否則此命令將會重裝最新版
      npm install -g @vue/cli

1. 切換項目所在位置

     I:
     cd I:\VuePro

2. 創(chuàng)建項目 （后綴帶上-n為去掉git版本控制，默認以git為版本，如果像我一樣是使用svn的就可以加上）

     vue create v3-demo
     vue create v3-demo -n

2.0 回車顯示結果

// 直接選擇Vue 3 Preview 也可，此處選擇最后一項，自行配置
Vue CLI v4.5.8
? Please pick a preset:
  config ([Vue 2] router, vuex, less, babel, typescript, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features       

2.1 回車顯示結果

// 第一行必選，畢竟需要切換到Vue 3，其他隨意，最簡demo僅僅顯示文字并不需要太多
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing  

2.2 回車顯示結果

// 毫無疑問選擇 3.x 當然你可以重回2.x
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)   
  

2.3 回車顯示結果

// 默認選擇就不浪費空間放這些不重要的選擇過程了
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
// 看自己需要是否保存該模板設置，此處自行選擇
? Save this as a preset for future projects? Yes
? Save preset as: VUE 3 Base
  

3. 最后等待創(chuàng)建完成后打開或運行項目

項目文件右鍵選擇 IDE或編輯器 比如 vs core 打開（前提裝有對應軟件）或者 命令行直接運行項目
 $ cd v3-demo
 $ npm run serve

2 —— vue Web方式創(chuàng)建項目：

前奏 —— 使用npm（依賴包管理工具）安裝 Vue CLI

      // 若已安裝，除非版本一致，否則此命令將會重裝最新版
      npm install -g @vue/cli

1. 命令行啟動web服務

vue ui

命令運行

1. 0 web頁面：

首頁

1. 1 創(chuàng)建項目：

詳情

預設

功能圖一

功能圖二

配置

保存預設

完成創(chuàng)建

編譯運行

運行結果

3 —— vue vite方式創(chuàng)建項目：

1. 創(chuàng)建項目

 npm init vite-app v3-demo

2. 編譯運行項目

npm install
npm run dev

3. Edge （其他瀏覽器需要bable轉換）打開項目鏈接，運行結果：