这是我参与「第五届青训营 」伴学笔记创作活动的第 八 天
一、项目环境
Node版本 5.2以上（这样才有npx命令）
VScode和volar插件
二、项目搭建
一、npx方式简洁版安装：npx nuxi init nuxt-app // nuxt-app 是项目名
此方法是可以直接创建一个舒适的nuxt编写环境，后续自己需要什么工具再自己添加（例如Ui框架，编写语言要用JS还是TS）【以下是运行结果，如果是下面这样，就说明创建成功了】
D:\vue-test>npx nuxi init test-nuxt3
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Nuxi 3.1.1 22:26:16
✨ Nuxt project is created with v3 template. Next steps: 22:26:17
› cd test-nuxt3 22:26:17
› Install dependencies with npm install or yarn install or pnpm install 22:26:17
› Start development server with npm run dev or yarn dev or pnpm run dev
二、npx方式全配置安装【推荐】：npx create-nuxt-app nuxt-test// nuxt-test 是项目名
这个方式就可以配置我们想要的基础框架依赖。下面的是可以选择js或ts，新手的话，避免麻烦，推荐先使用js去写一些demo来玩比较好，因为ts会要求你写很多的类型约束，然后你可能会面临很多莫名其妙的报错。
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxt-test1
? Project name: nuxt-test1
? Programming language: (Use arrow keys)
> JavaScript
TypeScript
下面是包管理工具，推荐用yarn
? Package manager: (Use arrow keys)
> Yarn
Npm
下面是选择ui框架，有非常多的选择，我在这边随意讲几个常用的ant design vue算是现在比较经典的ui框架了，和老牌element plus不分伯仲吧，但我个人觉得阿里比较捧react。Bootstrap vue是可以约束好全局某些组件的通用margin等等，方便复用。Tailwind css是我最近比较常用的，有人觉得他会让可读性变差，但个人了咯，他可以直接在class上添加属性就可以为组件元素等等添加几乎所有常用css的样式，省的再去写很多的scss,css什么的，方便写小项目（不太需要样式复用的情况） ，复用多还是老老实实写scss吧。
? UI framework:
> None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Oruga
Primevue
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js
下面是模板渲染引擎，pug是有着增加代码复用的include写法和不用写结束符，强制缩进等优点的模板引擎
? Template engine: (Use arrow keys)
> HTML
Pug
下面是选择一些依赖，可以选择要axios，可以帮助你完成对你的接口进行get,post等等操作的库，基本你要做和接口相关的事宜都会用到它。PWA是渐进式网络应用，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios - Promise based HTTP client
( ) Progressive Web App (PWA)
( ) Content - Git-based headless CMS
下面是让代码变得更可爱，你的笑容变得更亲切的代码格式约束的东西，ESLint可以设置你代码在写的时候要空多少行，什么情况一定要换行等等。prettier可以在你保存代码的时候，自动帮你格式化，换行等等，但这也导致上述两者可能会发生冲突。谁知道你prettier在保存的时候格式化完的代码是不是eslint要求的风格呢【微笑】 commitlint是在你git提交代码的时候，检验你写的那句话符不符合规范【别问，我一开始也不是很理解】
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint
( ) Commitlint
下面是测试框架，最常用是Jest，vue-test-util和vitest推荐给您。
? Testing framework: (Use arrow keys)
> None
Jest
AVA
WebdriverIO
Nightwatch
下面是选择你要你要服务端渲染（SSR/SSG），还是SPA单页面应用
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
Single Page App
下面选择要代码编译后在哪执行nodejs端还是静态
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
Static (Static/Jamstack hosting)
下面直接选择开发工具第一个，推荐
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
( ) Semantic Pull Requests
( ) Dependabot (For auto-updating dependencies, GitHub only)
