VUE3-从入门到弃坑

Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/

环境部署

1. 安装前提需要 Node.js : "^15.0"
2. 在命令行中执行create vue的指令(忽略>)：
   > npm init vue@3
   如果需要支持IE11，可以使用以vue@2新建项目。
3. 在命令行中根据提示执行：

   ✔ 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. 确定需要的工具：
   TypeScript：需不需要开启ts
   JSX：JavaScript的语法扩展
   Pinia：状态管理库
   Vitest：单元测试框架
   Cypress：测试工具
   ESLint：JS语法规则和代码风格的检查工具
   Prettier：代码格式化工具
5. 恭喜你走到这步时候，项目已经创建完成了。

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

下一步

 看到这个页面，那么恭喜你，vue项目成功跑起来了。

---

知识点

vite.config.js

里面的Base和之前的publicPath是对等的

main.js

里面可以配置全局的插件，比如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')

因个人风格喜好，采用了sass（npm install sass --save），所以相对应的App.vue修改:

<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>

---

最后

我弃坑了！

---

 有兴趣的小伙伴可以关注一波

 o(*￣▽￣*)ブ