VUE3 – da entrada ao abandono

Vue.js - Estrutura JavaScript progressiva | Vue.js Vue.js - Estrutura JavaScript progressiva https://cn.vuejs.org/

Implantação de ambiente

1. O pré-requisito de instalação requer Node.js: "^15.0"
2. Execute o comando create vue na linha de comando (ignore >):
   > npm init vue@3
   Se precisar de suporte ao IE11, você pode usar vue@2 para criar um novo projeto.
3. Siga as instruções na linha de comando:

   ✔ Project name: … <your-project-name>
   ✔ Add TypeScript? … No / Yes
   ✔ Add JSX Support? … No / Yes
   ✔ Add Vue Router for Single Page Application development? … No / Yes
   ✔ Add Pinia for state management? … No / Yes
   ✔ Add Vitest for Unit testing? … No / Yes
   ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
   ✔ Add ESLint for code quality? … No / Yes
   ✔ Add Prettier for code formatting? … No / Yes
   
   Scaffolding project in ./<your-project-name>...
   Done.

4. Determine as ferramentas que você precisa:
   TypeScript: você precisa habilitar ts?
   JSX: extensão de sintaxe JavaScript
   Pinia: biblioteca de gerenciamento de estado
   Vitest: estrutura de teste de unidade Cypress
   : ferramenta de teste
   ESLint: regras de sintaxe JS e ferramenta de verificação de estilo de código
   Prettier: ferramenta de formatação de código
5. Parabéns por chegar a este ponto, o projeto foi criado.

Configuração do projeto

npm install

Compilar e recarregar a quente para desenvolvimento

npm run dev

Próxima Etapa

 Ao ver esta página, parabéns, o projeto vue está sendo executado com sucesso.

---

Pontos de conhecimento

vite.config.js

O Base dentro é equivalente ao publicPath anterior.

principal.js

Plug-ins globais podem ser configurados internamente, como ant-design-vue, animate.css, aos...

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 动画
import 'animate.css';

// ant 样式
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

// Animate on scroll library
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
AOS.init({
    once: true, // 只展示一次动画
    offset: 50,
    delay: 100,
    duration: 3000,
});


const app = createApp(App)

app.use(Antd)
app.use(createPinia())
app.use(router)

app.mount('#app')

Devido às preferências pessoais de estilo, usei sass (npm install sass --save), então as modificações correspondentes do App.vue são:

<script setup>
import {RouterView } from 'vue-router'
</script>

<template>
  <div id="app">
    <RouterView />
  </div>
</template>

<style lang="scss">
#app {
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

---

afinal

Eu desisto!

---

 Amigos interessados ​​podem acompanhar a onda

 o(*￣▽￣*)bu