【前端从入门到入土系列】NuxtJs基础语法

英文官网：https://nuxt.com/

中文官网：https://www.nuxt.com.cn/

安装

npx nuxi@latest init <project-name>

1.初始化项目

npm create vite 项目名称 --template vue-ts

2.启动项目

cd 项目路径 && npm install && npm run dev

3.集成配置（别名）

npm i @types/node --save-dev

修改tsconfig.json

{
  "compilerOptions": {
    // 别名
    "typeRoots": [
        "node_modules/@types",
        "src/types"
    ],

    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
        "@": ["src"],
        "@/*": ["src/*"]
    },

    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "ESNext","DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

修改tsconfig.node.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

修改vite.config.ts

 import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": resolve(__dirname, "src")
        }
    },
    server: {
        port: 9000,
        proxy: {
            "/api": {
                target: "http://127.0.0.1:8000",
                changeOrigin: true,
                rewrite: (path: string) => path.replace(/^\/api/, "")
            }
        }
    }
})
 

3.代码风格

3.1集成tslint

npm i eslint eslint-plugin-vue --save-dev
npm i @typescript-eslint/eslint-plugin --save-dev

创建.eslintrc.js

module.exports = {
    parser: 'vue-eslint-parser',
 
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
 
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
    ],
 
    rules: {
        // override/add rules settings here, such as:
    }
};
 

创建忽略文件

node_modules/
dist/
index.html

修改package.json

{
    ...
    "scripts": {
        ...
        "eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件",
        "eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    }
    ...
}

3.2集成prettier

npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

创建配置文件.prettierrc.js

module.exports = {
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用 tab 缩进，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号代替双引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾使用逗号
    trailingComma: 'all',
    // 大括号内的首尾需要空格 { foo: bar }
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'auto'
}

修改.eslintrc.js

module.exports = {
    ...
 
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'plugin:prettier/recommended'
    ],
 
    ...
};

修改package.json

{
    ...
    "scripts": {
        ...
        "prettier:comment": "自动格式化当前目录下的所有文件",
        "prettier": "prettier --write"
    }
    ...
}

4.搭建目录结构

5.集成第三方依赖

5.1集成vueuse

npm i @vueuse/core

5.2集成vue-router

npm i vue-router --save

5.3集成pinia

npm i pinia

5.4集成axios

npm i axios
npm i pinia-plugin-persistedstate

引入

import { createPinia } from "pinia"
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
 
const store = createPinia()
 
store.use(piniaPluginPersistedstate)
 
export default store
 

使用

import { defineStore } from 'pinia' 
export const useStore = defineStore('main', { state: () => { 
    return { 
    someState: 'hello pinia', 
  } 
}, 
persist: true, //true即为存储，默认存储到localStorage，someState就是存储key值
})

5.5集成css

npm add -D sass

5.6 集成elementplus

npm install element-plus

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

部分引入

npm i unplugin-vue-components unplugin-auto-import

修改vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

5.7集成图标

npm install @element-plus/icons-vue

使用
import { Edit } from "@element-plus/icons-vue"

5.8 集成js-cookie

npm i js-cookie --save
npm i @types/js-cookie --save
# 由于ESLint默认使用Espree进行语法解析，无法识别TypeScript语法，因此我们需要安装@typescript-eslint/parser替代默认的解析器
npm install @typescript-eslint/eslint-plugin