學習多了自然就迷糊了，不學習那注定迷糊，
1 安裝腳手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli2 檢查版本 Vue CLI v4.5.7
vue -V
3 搭建專案
vue create vue3.0? Please pick a preset: (Use arrow keys) //請選擇預選項
> Default ([Vue 2] babel, eslint) //使用Vue2默認模板進行創建
Default (Vue 3 Preview) ([Vue 3] babel, eslint) //使用Vue3默認模板進行創建
Manually select features //手動選擇(自定義)的意思這時候我們選擇第三項手動選擇，選擇的時候按回車就可以實作，(如果這時候你沒有上面的三個選項，說明的 vue-cli 是舊版本，需要你更新，)
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors //CSS前處理器
(*) Linter / Formatter //格式化工具
( ) Unit Testing //單元測驗
( ) E2E Testing //E2E測驗選擇TypeScript的選項，然后再按回車進入下一層選擇
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)這里要選擇 3.x 的版本，點擊回車，
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)是否使用TypeScript和Babel的形式編譯 JSX.這里我們也選擇n
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)然后會出現ESLint的一些配置,這里我們選擇第一項，默認就好 回車后會讓你選擇增加lint的特性功能，
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save //保存的時候進行Lint
( ) Lint and fix on commit //需要幫你進行fix（修理），這項我們不進行選擇回車后讓你選擇這些組態檔時單獨存放，還是直接存放在package.json檔案里，這里選擇放在單獨的檔案里，
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files最后一個問題，是問你需不需要把這些配置保存下來，下次好直接進行使用，我這里選擇不用(n)，淡然你可以自行選擇
Save this as a preset for future projects? (y/N)靜靜得等待即可-------出現下面的資訊，說明我們已經安裝完成了，
Done in 10.33s.
$ cd vue3
$ npm run serve根據提示在命令列輸入cd vue3進入專案，然后再輸入npm run serve開啟專案預覽，這時候就會給出兩個地址，都可以訪問到現在的專案.
根據提示在命令列輸入cd vue3-1進入專案，然后再輸入yarn serve開啟專案預覽，這時候就會給出兩個地址，都可以訪問到現在的專案.把地址放到瀏覽器的地址欄，看到下面的頁面，說明安裝ok了，
這就簡單得搭建好了一個專案 下一步學習基本用法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/263890.html
標籤：區塊鏈