Nuxt3搭建项目

877 阅读4分钟

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? · YesWhere does your code run? · browser . NodeWhat format do you want your config file to be in? · JavaScriptWould 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",