Чтобы изучить Vue3.0, начните с настройки среды.

Тест источника ошибок, некоторые из них онлайн. Я желаю вам больше правок, и сегодня вам будет трудно закрыть глаза.

Это оVue3.0Вторая статья в серии статей, посвященная созданиюVue3.0иviteизVue3.0Среда разработки, благодаря изучению данной статьи, вы узнаете следующее:

использоватьviteинициализацияVue3.0проект
настроитьts
настроитьvue-router
настроитьvuex
использоватьVue3.0разрабатыватьTodoListПример

Эта статья была впервые опубликована в [Playing at the Front End], следуйте за мной и учитесь вместе с вамиVue3.0. В то же время, нажмите на ссылку ниже, чтобы получить доступ к более интересным статьям редактора

Чтобы изучить Vue3.0, давайте сначала разберемся с прокси350+ лайков

Практические навыки, Vue тоже умеет так писать2800+ лайков

Абсолютно сухой материал~! Изучите эти советы Vue, вы сможете уйти с работы пораньше и встречаться с богиней1300+ лайков

Я настраиваю Vue в проекте так1200+ лайков

Впереди высокая энергия, это последняя волна боевых навыков Vue, это бесполезно и потрясающе.1100+ лайков

Научись пользоваться Vue JSX, машина старых крестных твоя800+ лайков

использовать`vite`Инициализировать проект

привет введение

viteЭто новый инструмент, над которым Юда поработал в этом году.viteОписание звучит так: Vite — это самоуверенный инструмент для веб-разработки, который обслуживает ваш код через встроенный импорт модуля ES во время разработки и связывает его сRollupдля производства. В переводе на китайский язык это:Vite является уроженцемES Module ВедомыйWebРазработать инструменты сборки. Нативный браузер в среде разработкиES importsразработки, в производстве на основеRollupБэйл.

В приведенном выше отрывке упоминается ключевое словоES Module, что это? Для получения подробной информации вы можете посетитьdeveloper.Mozilla.org/this-cn/docs/…смотреть. Мы будем кратки здесь. В первые дни не было фронтенд-инжиниринга, а потом мы написалиjavascriptзаписываются в файл, а затем передаютсяscriptМетки для ссылки, а позже с развитием интерфейса все больше и больше,jsЗависимости между ними становятся все более сложными, иJavaScript 程序拆分为可按需导入的单独模块Механизм для поддержания этой зависимости родилсяAMD,CMDподожди, покаES ModuleЭто функция, от которой зависит нативный модуль, поддерживаемый браузером.

Зачем использовать вайт

Почему вы хотели запуститьvite, где мы используемwebpackКогда каждый проект разработки должен начинаться через десятки секунд или даже более одной минуты, медленное и горячее обновление происходит относительно медленно, иviteГлавная фишка быстрая, официальный сайт дляviteхарактеризуется

быстрый холодный пуск
Мгновенное горячее обновление модуля
Настоящая компиляция по запросу

Насколько это быстро? Давайте сначала создадим новый проект.

Инициализировать проект vite

Инициализируйте проект, откройте окно терминала в рабочей области, дляwindowПользовательcmd, а затем выполните следующую команду
```
yarn create vite-app my-vue3
```
После выполнения будет выведено следующее.Вы видите, что новый проект очень быстрый, просто используйте1.63s
После инициализации проекта перейдитеcd my-vue3Войдите в проект, а затем выполнитеyarnЗависимости установки (здесь рекомендуется зеркало Taobao, так быстрее)
После установки зависимостей нужно пройтиyarn devСтартовый проект

Вы моментально испытали ощущение запуска проекта за считанные секунды?После запуска можно пройти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Больше способов использования мы постепенно познакомим вас в следующем цикле статей.

настроить машинопись

typescriptСейчас это стало одним из необходимых навыков во фронтенде, и большое количество проектов стало базироваться на нем.typescriptразвивать. в настоящее время используетVue2.0когда, потому чтоVue2.0без правtypescriptподдержку, так что пользуйтесьtsФункция развития выглядит немного неудобно. но здесьVue3, его собственный исходный код основан наtsразвито, так что даtsЕстественно имеет большую поддержку. использоватьviteнастроитьtypescriptЭто очень просто, просто следуйте инструкциям ниже.

Установитьtypescript
```
yarn add typescript -D
```

инициализацияtsconfig.json

# 然后在控制台执行下面命令
npx tsc --init

будетmain.jsпревратиться вmain.ts, в то время какindex.htmlСсылка внутри также изменена наmain.ts, через необходимость модификацииApp.vueиHelloWorld.vueфайл, измененный следующим образом
```

<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файле требуется следующая конфигурация:
1. Добавьте в корневой каталог проектаshim.d.tsдокумент
2. Добавьте следующее
```
declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}
```
Затем вы можете с радостью использовать его в компонентеtsохватывать

настроить`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 vue-router@4.0.0-beta.7

Настроить vue-маршрутизатор

в проектеsrcновый каталог нижеrouterкаталог, затем добавьтеindex.tsфайл, добавьте в файл следующее

import {createRouter, createWebHashHistory} from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default 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')

настроить vuex

иvue-routerтакой же, новыйvuexв настоящее время также вbetaверсия, текущая версия4.0.0-beta.4

установить вуекс

yarn add vuex@4.0.0-beta.4

настроить vuex

в проектеsrcновый каталог нижеstoreкаталог и добавитьindex.tsфайл, добавьте в файл следующее

import { createStore } from 'vuex'

interface State {
  userName: string
}

export default 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来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: [{
    path: '/todolist',
    // 必须添加.vue后缀
    component: () => import('../views/todo-list.vue')
  }]
})

Тогда мы можем пройтиhttp://localhost:3000/#/todolistпосещатьTodoList, эффект показан ниже

Суммировать

До сих пор мыVue3.0Среда разработки проекта завершена.Конечно, есть еще много вещей, которые нужно улучшить.Например, нам еще нужно ее настроить.typescriptнастроить, а затем добавитьeslintи Т. Д. В то же время, как перепрыгнуть маршрут в компоненте, используйтеvuexЯ еще не объяснил это, но, по крайней мере, мы начали, и в следующей статье будет рассказано больше. Эта статья была впервые опубликована в открытом доступесобраниеНет. [Небольшая игра на переднем конце], следуйте за мной, давайте обсудим вместеVue3.0

Эпилог

Не истощайте свое вдохновение и воображение, не будьте рабом своих моделей. - Винсент Ван Гог

использоватьviteИнициализировать проект

привет введение

Зачем использовать вайт

Инициализировать проект vite

Посмотреть структуру проекта

Просмотр содержимого файла main.js

настроить машинопись

настроитьvue-router

Установитьvue-router

Настроить vue-маршрутизатор

будетrouterпознакомился сmain.tsсередина

настроить vuex

установить вуекс

настроить vuex

познакомился сmain.tsсередина

Разработать TodoList

Добавить кtodolistстраница

Настроить маршрутизацию

Суммировать

Эпилог

использовать`vite`Инициализировать проект

настроить`vue-router`

Установить`vue-router`

будет`router`познакомился с`main.ts`середина

познакомился с`main.ts`середина

Добавить к`todolist`страница