vue3.0項目快速搭建的完整步驟記錄

//安裝最新vue/cli
yarn global add @vue/cli 
//或
npm install -g @vue/cli

 ? Please pick a preset: (Use arrow keys)
 default (babel, eslint)   // 默認選項 
 Manually select features  //  手動選擇功能

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                              //  代碼編譯
( ) TypeScript                         //  ts
( ) Progressive Web App (PWA) Support  //  支持漸進式網頁應用程序
( ) Router                             //  vue路由
( ) Vuex                               //  狀態管理模式
( ) CSS Pre-processors                 //  css預處理
( ) Linter / Formatter                 //  代碼風格、格式校驗
( ) Unit Testing                       //  單元測試
( ) E2E Testing                        //  端對端測試

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only     //  隻進行報錯提醒
  ESLint + Airbnb config                //  不嚴謹模式
  ESLint + Standard config              //  正常模式
  ESLint + Prettier                     //  嚴格模式
  TSLint (deprecated)                   //  TypeScript格式驗證工具

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save               // 保存時檢測
 ( ) Lint and fix on commit     // 修復和提交時檢測

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files     //  存放在專用配置文件中
  In package.json               //  存放在package.json中

cd may-project
yarn serve

<template>
  <div class="home">
    {{msg}}
  </div>
</template>

<script>
import { toRefs, reactive } from 'vue'
export default {
  name: 'Home',
  setup: () => {
    const state = reactive({
      msg: 'Hello World'
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

import {
  createApp
} from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')