Vite と npm で vue3 足場を構築する方法

vue3 の最新バージョンの vue-cli をインストールします。

古いバージョンをアンインストールする

vue-cli2 卸载    npm uninstall -g vue-cli
vue-cli3 卸载    npm uninstall -g @vue/cli

新しいバージョン @vue/cli をインストールします

vue-cli3 安装最新版   npm install -g @vue/cli
vue-cli3 安装指定版   npm install -g @vue/[email protected]

//检查vue版本号
vue -V

vue3 用の最新の足場を構築する

Webで構築する方法

旧バージョンの手順と同様に、インストール中に構成項目を選択できます。

npm create myapp

Viteの構築方法

プロジェクトを初期化する

npm init vite-app myapp
或
yarn create vite-app myapp

依存関係をインストールする

yarn install 
或
yarn 
或
npm i

スタートアッププロジェクト

yarn dev 
或
npm run dev

このプロジェクトは単なる基本構造であり、他に構成はありません。構成を自分で追加する必要があります。

vite設定項目

TSの構成

1 インストール

yarn add typescript -D

2 初期化

//执行命令 初始化 tsconfig.json 
npx tsc --init

3 main.js をmain.ts に変更して、 <script> <script lang="ts">

4 vue ファイルを認識するように ts を設定し、プロジェクトのルートディレクトリにshim.d.tsファイルを追加します。

declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

vue-router を構成する

1 インストール

yarn add [email protected]
// or
yarn add vue-router@next

2 vue-router を設定する

プロジェクト src ディレクトリの下に新しいルーターディレクトリを作成し、index.tsファイルを追加して、次の内容を追加します。

import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

3 ルーターをmain.tsに導入し、main.ts ファイルを変更します

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'

// import router 后创建并挂载根实例。
const 
// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中
createApp(App).use(router).mount('#app')

vuex を構成する

1 インストール

yarn add vuex@4
//或者
yarn add vuex@next

2プロジェクトの src ディレクトリの下に新しいストアディレクトリを作成し、index.tsファイルを追加し、次の内容を追加します。

import { createStore } from 'vuex'

interface State {
  userName: string
}
export default createStore({
  state(): State {
    return {
      userName: "vuex",
    };
  },
  mutations:{ },
  actions: { },
  modules: { },
  plugins: [ ]

});