この記事はWeChatパブリックアカウントから複製されています：フロントエンドプレイの一部、作者のフロントエンド攻撃者
この記事では、基礎構築するために、ゼロからあなたを取る
Vue3.0のこの記事を学ぶことで、あなたは次のことを学びます、開発環境を：viteVue3.0
-
vite最初のVue3.0プロジェクトを使用する -
構成
ts -
構成
vue-router -
構成
vuex -
例を
Vue3.0開発するために使用するTodoList
1つは、vite初期化プロジェクトを使用する
招待状の紹介
viteこれは今年Youdaによって作成された新しいツールでありvite、その説明は次のとおりです。Viteは、開発中にネイティブESモジュールのインポートを介してコードを提供し、本番用にRollupにバンドルする、意見のあるWeb開発ビルドツールです。 ：Vite は、ネイティブによってES Module 駆動さ れるWeb 開発および構築ツールです 。これはES imports 、開発環境でのブラウザーのネイティブ 開発と、実稼働環境でのRollupパッケージ化に基づいています。
なぜviteを使うのか
特にリリースされるのはなぜですか？vite使用するwebpackと、プロジェクトが開発されるたびにプロジェクトを開始するのに数十秒または1分以上かかります。これは比較的遅く、ホットアップデートは比較的遅く、vite主な機能は高速です。公式サイトのvite特徴はこんな感じ
-
ファストコールドスタート
-
インスタントモジュールのホットアップデート
-
真のオンデマンドコンパイル
どれくらい速いですか？最初に新しいプロジェクトを試してみましょう
viteプロジェクトを初期化する
-
プロジェクトを初期化し、
windowユーザー用にワークスペースでターミナルウィンドウを開いてからcmd、次のコマンドを実行します。yarn create vite-app my-vue3実行後、次のコンテンツが出力されます。新しいプロジェクトが非常に高速であることがわかります。使用するだけです。
1.63s
-
プロジェクトを初期化した後、プロジェクトに
cd my-vue3移動し、yarnインストールの依存関係を実行します（ここではTaobaoミラーを使用することをお勧めします。これは高速です） -
依存インストール
yarn devはプロジェクトを開始する必要があります
Miaoqiプロジェクトの感触を一瞬で体験しましたか？立ち上げ後、次の方法
http://localhost:3000でプロジェクトにアクセスできます。
プロジェクト構造を表示する
使用後はvscode開いているプロジェクトを、新しくすることを見ることができますvue-cli4作成したプロジェクトの構造は基本的に作成したプロジェクト構造と同じである、両方慣れているApp.vueと、main.js
main.jsファイルの内容を表示する
オンにするmain.js
import { createApp } from'vue'
import App from'./App.vue'
import'./index.css'
createApp(App).mount('#app')
作成方法が変更されていることがわかりました。初期化にはVue元のnew Vue方法を使用しますVue。ではVue3.0、変更方法をパスに変更しcreateAppます。Vue3.0その他の使用方法については、以下の一連の記事で徐々に説明します。
2、typescriptを構成します
typescript今では必要なフロントエンドスキルのひとつになり、それに基づいて多くのプロジェクトがtypescript開発され始めています。使用するVue2.0場合、サポートVue2.0がないtypescriptため、ts開発機能を使用するのは少し厄介です。しかし、それが来るとVue3、それ自体のソースコードはts開発に基づいているので、ts生得的なものを十分にサポートしています。vite設定はtypescript非常に簡単で、唯一の次のステップが必要とされています。
-
インストール
typescriptyarn add typescript -D -
初期化
tsconfig.json# 然后在控制台执行下面命令 npx tsc --init -
に
main.js変更されmain.ts、index.html内部の参照もに変更されます。main.ts変更App.vueしてHelloWorld.vueファイルする必要があるため、変更方法は次のとおりです。<!--将 <script> 修改为 <script lang="ts">--> <script lang="ts"> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>変更後、再起動してプロジェクトにアクセスします。この構成は可能です
main.tsが、開くとimport App from App.vueエラーが発生します：、Cannot find module './App.vue' or its corresponding type declarations.これはファイルtsがまだ認識されていないためvueであり、次の構成が必要です。次に、あなたが幸せに使用することができ
ts、それをコンポーネントに-
プロジェクトのルートディレクトリに
shim.d.tsファイルを追加します -
以下を追加します
declare module"*.vue" { import { Component } from"vue"; const component: Component; exportdefault component; }
-
3、構成 vue-router
でVue2.0ルート我々は、一般的に使用することを選択しますvue-routerで、Vue3.0使用が残るvue-routerただし、そしてVue3.0現在のようvue-routerバージョンがbeta、この記事の執筆時点でのバージョンは、バージョンがあります4.0.0-beta7
インストールvue-router
現在のためvue-routerのためのvue3.0バージョンまたはbetaバージョンが直接することはできませんyarn add vue-routerインストールされていますが、必要バージョン番号を持参します
yarn add [email protected]
vue-routerを構成する
プロジェクトディレクトリの下にsrc新しいrouterディレクトリを作成し、index.tsファイルを追加し、次のコンテンツをファイルに追加します
import {createRouter, createWebHashHistory} from'vue-router'
// 在 Vue-router新版本中，需要使用createRouter来创建路由
exportdefault createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
// 路由地址
routes: []
})
新しいVue3.0初期化方法が変更されたのと同じようにvue-router、初期化方法も変更され、createRouterルーティングを初期化するためのパスになりました。
にrouter導入されmain.tsます
main.tsファイルの内容を次のように変更します
import { createApp } from'vue'
import App from'./App.vue'
import'./index.css'
import router from'./router/index'
const app = createApp(App)
// 通过use 将 路由插件安装到 app 中
app.use(router)
app.mount('#app')
4、vuexを構成します
vue-router新しいvuex現在のbetaバージョンと同じ、現在のバージョンは4.0.0-beta.4
vuexをインストールする
yarn add [email protected]
vuexを構成する
プロジェクトディレクトリの下にsrc新しいstoreディレクトリを作成し、index.tsファイルを追加し、次のコンテンツをファイルに追加します
import { createStore } from'vuex'
interface State {
userName: string
}
exportdefault createStore({
state(): State {
return {
userName: "子君",
};
},
});
に導入されましmain.tsた
import { createApp } from'vue'
import App from'./App.vue'
import'./index.css'
import router from'./router/index'
import store from'./store/index'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
TodoListを開発する
上記の一連の操作により、開発環境が構成された後、まず新しい開発環境で開発し、TodoList正常かどうかを確認します。
todolistページを追加
-
まず、
srcディレクトリの下に新しいディレクトリを作成しviews、次にその中に新しいファイルを作成してtodo-list.vue、次のコンテンツをファイルに追加します<template> <div class="todo-list"> <div> <label>新增待办</label> <input v-model="state.todo" @keyup.enter="handleAddTodo"> </div> <div> <h3>待办列表({ {todos.length}})</h3> <ul> <li v-for="item in todos" :key="item.id" @click="handleChangeStatus(item, true)"> <input type="checkbox"> <label>{ {item.text}}</label> </li> </ul> </div> <div><h3>已办列表({ {dones.length}})</h3></div> <ul> <li v-for="item in dones" :key="item.id" @click="handleChangeStatus(item, false)"> <input type="checkbox" checked> <label>{ {item.text}}</label> </li> </ul> </div> </template> <script lang="ts"> // 在vue2中 data 在vue3中使用 reactive代替 import { reactive, computed } from 'vue' import { useRouter } from 'vue-router' export default { // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成 setup(props, context) { // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似 const state = reactive({ todoList: [{ id: 1, done: false, text: '吃饭' },{ id: 2, done: false, text: '睡觉' },{ id: 3, done: false, text: '打豆豆' }], todo: '' }) // 使用计算属性生成待办列表 const todos = computed(() => { return state.todoList.filter(item => !item.done) }) // 使用计算属性生成已办列表 const dones = computed(() => { return state.todoList.filter(item => item.done) }) // 修改待办状态 const handleChangeStatus = (item ,status) => { item.done = status } // 新增待办 const handleAddTodo = () => { if(!state.todo) { alert('请输入待办事项') return } state.todoList.push({ text: state.todo, id: Date.now(), done: false }) state.todo = '' } // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用 return { state, todos, dones, handleChangeStatus, handleAddTodo } } } </script> <style scoped> .todo-list{ text-align: center; } .todo-list ul li { list-style: none; } </style>ルーティングを調整する
-
まず、
App.vueファイルの内容を次のように変更します<template> <router-view></router-view> </template> <script lang="ts"> export default { name: 'App' } </script> -
次に、
router/index.tsファイルを変更して、新しいルートを追加し ますimport {createRouter, createWebHashHistory} from'vue-router' // 在 Vue-router新版本中，需要使用createRouter来创建路由 exportdefault createRouter({ // 指定路由的模式,此处使用的是hash模式 history: createWebHashHistory(), // 路由地址 routes: [{ path: '/todolist', // 必须添加.vue后缀 component: () =>import('../views/todo-list.vue') }] })この時、
http://localhost:3000/#/todolist訪問TodoListすることができます、効果は下の図に示されています
-
総括する
この時点で、Vue3.0開発環境は完成したと見なされます。もちろん、まだ改善すべき点がたくさんあります。たとえばtypescript、構成を調整して追加する必要がありますeslint。