Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/
环境部署
- 安装前提需要 Node.js : "^15.0"
- 在命令行中执行create vue的指令(忽略>):
> npm init vue@3
如果需要支持IE11,可以使用以vue@2新建项目。 - 在命令行中根据提示执行:
✔ 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.
- 确定需要的工具:
TypeScript:需不需要开启ts
JSX:JavaScript的语法扩展
Pinia:状态管理库
Vitest:单元测试框架
Cypress:测试工具
ESLint:JS语法规则和代码风格的检查工具
Prettier:代码格式化工具 - 恭喜你走到这步时候,项目已经创建完成了。
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(* ̄▽ ̄*)ブ