Vue之快速开始一个项目
大约 2 分钟
Vue之快速开始一个项目
快速创建项目
Vue CLI
vue create hello-world
如果之前本地有安装vue2.x的脚手架版本需要先进行卸载
npm uninstall vue-cli -g
安装vue3
npm install @vue/cli -g
简介
? Please pick a preset: Manually select features # 请选择
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) # 空格键选择，a键全选，i键反选
>(*) Choose Vue version # 是否自定义选择vue版本
(*) Babel # 是否使用babel以支持ES6等语言
(*) TypeScript # 是否使用TypeScripyt
(*) Progressive Web App (PWA) Support # PWA渐进式web app支持
(*) Router # 路由插件
(*) Vuex # vue状态管理插件
(*) CSS Pre-processors # CSS预处理插件
(*) Linter / Formatter # 代码 / 格式检查插件
(*) Unit Testing # 是否开启单元测试
(*) E2E Testing # 支持 E2E 测试
Vite
npm create vue@3 # 创建vue3项目
npm create vue@2 # 创建vue2项目
√ Project name: ... hellowolr # 项目名
√ Add TypeScript? ... No / Yes # 是否使用TypeScript
√ Add JSX Support? ... No / Yes # 是否使用JSX
√ Add Vue Router for Single Page Application development? ... No / Yes # 是否添加vue-route
√ Add Pinia for state management? ... No / Yes # 是否添加Pinia状态管理功具
√ Add Vitest for Unit Testing? ... No / Yes # 是否添加单元测试
√ Add an End-to-End Testing Solution? » No # 端到端测试
√ Add ESLint for code quality? ... No / Yes # ESlint检测
√ Add Prettier for code formatting? ... No / Yes # 添加漂亮的代码格式?
NuxtJs
Nuxt.js 十分简单易用。一个简单的项目只需将
nuxt添加为依赖组件即可。
运行 create-nuxt-app
为了快速入门，Nuxt.js 团队创建了脚手架工具 create-nuxt-app。
确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：
$ npx create-nuxt-app <项目名>
或者用 yarn ：
$ yarn create nuxt-app <项目名>
它会让你进行一些选择:
- 在集成的服务器端框架之间进行选择:
- 选择您喜欢的 UI 框架:
- 选择您喜欢的测试框架:
选择你想要的 Nuxt 模式 (
UniversalorSPA)添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
添加 EsLint 以在保存时代码规范和错误检查您的代码。
添加 Prettier 以在保存时格式化/美化您的代码。