Nuxt3搭建项目
官网地址：v3.nuxtjs.org/getting-sta…
创建项目
npx nuxi init nuxt-app
注意：创建Nuxt项目时，需要从 raw.Githubusercontent.com 下载依赖，但该域名被墙，因此需要配置本地HOST
打开终端命令行，输入drivers按回车
进入特定文件夹目录C:\Windows\System32\drivers\etc,修改hosts文件，增加`185.199.108.133 raw.githubusercontent.com`
需新增
185.199.108.133 raw.githubusercontent.com
如果上述IP失效，可以通过 IPAddress.com **查询到域名最新的IP
nuxt3文件目录说明
- .nuxt // 自动生成的目录，用于展示结果
- node_modules // 项目依赖包存放目录
- .gitignore // Git的配置目录，比如一些文件不用Git管理就可以在这个文件中配置
- app.vue // 项目入口文件，你可以在这里配置路由的出口
- nuxt.config.ts // nuxt项目的配置文件 ，这个里边可以配置Nuxt项目的方方面面
- package-lock.json // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致
- package.json // 包的配置文件和项目的启动调式命令配置
- README.md // 项目的说明文件
- tsconfig.json // TypeScript的配置文件
- pages // 开发的页面目录
- components // 组件目录
- assets // 静态资源目录
- layouts // 项目布局目录
- middleware // 中间件目录
- composables // 代码模块化目录(可复用组合逻辑)
- plugins // 自定义插件目录
- server // 服务器目录
关于nuxt.config.js 配置结构
1、build：应用依赖第三方模块
2、cache：该配置项让你开启组件缓存策略以提升渲染性能。
3、css：该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。
4、dev：该配置项用于配置 Nuxt.js 应用是开发还是生产模式。
5、env：该配置项用于定义应用客户端和服务端的环境变量。
6、generate：该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。
7、head：该配置项用于配置应用默认的meta标签。
8、loading：该配置项用于个性化定制 Nuxt.js 使用的加载组件。
9、modules：该配置项允许您将Nuxt模块添加到项目中。
10、modulesDir：该配置项允许您定义Nuxt.js应用程序的node_modules文件夹
11、plugins：该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
12、rootDir：该配置项用于配置 Nuxt.js 应用的根目录。
13、router：该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。
14、srcDir：该配置项用于配置应用的源码目录路径。
15、transition：该配置项用于个性化配置应用过渡效果属性的默认值。
官网配置详细说明 https://v3.nuxtjs.org/api/configuration/nuxt-config
项目初始化Eslint
1. 执行 npx eslint --init 初始化一个.eslintrc.js并自动安装相关依赖，可参考选项:
You can also run this command directly using ‘npm init @eslint/config’.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser . Node
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now with npm? · No / Yes
2. 安装依赖npm install -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
3. 在packahe.json的scripts中添加 "lint": "eslint \"src/**/*.{js,jsx,vue,ts,tsx}\" --fix"
4. 虽然nuxt3默认支持了typescript，但是用eslint还是提示Cannot find module ‘typescript’，所以需要再安装typescript依赖npm install -D typescript
配合prettier
1. 安装：npm install -D prettier eslint-plugin-prettier eslint-config-prettier
2. 设置prettier格式化规则，eslint和prettier结合使用可以直接在eslintrc中配置prettier
Element-plus的安装配置
1. 安装命令
npm install element-plus
npm install @element-plus/icons-vue
2. 配置
2.1 因为 element-plus 属于第三方插件，需要在 plugins 目录配置
2.1 新建 plugins 目录， 在目录下新建 element-plus.client.ts 文件
import * as ElementPlus from 'element-plus/dist/index.full'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ElementPlus, {
locale: zhCn,
})
})
2.3 在 nuxt.config.ts 中全局配置样式 css 的位置
css:['element-plus/dist/index.css']
scss安装
安装 npm install sass --save-dev
nuxt配置env环境
1. 项目跟目录下新建.env.local.114文件
2. 在package.json中添加命令 "dev-114": "nuxt dev --dotenv .env.local.114",
