Vue && Vite Manual

MyFreeIT

已于 2023-07-07 10:00:09 修改

阅读量694

点赞数

分类专栏： Script 文章标签： vue.js 前端 javascript

于 2023-07-04 19:26:21 首次发布

创作源自于MyFreeIT

本文链接：https://blog.csdn.net/MyFreeIT/article/details/131533791

版权

Script 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

环境准备

VS code

安装 Volar

编写代码时实时检查语法
在这里插入图片描述

安装Eslint

在这里插入图片描述
如果ESlint在vs code中不起作用，通过setting 设置

vs code / F1 检查是否正常 Eslint: show output channel.
在这里插入图片描述
通过邮件设置默认代码格式化工具

Node 和 NPM安装

Nodejs

检查NPM的下载地址

>npm config get registry
https://registry.npmjs.org/

如果上面的路径不可用，可以使用镜像地址：https://registry.npmmirror.com

create project

初始化项目

在这里插入图片描述

$ npm create vite@latest

或者
vue 默认就是vite项目

 npm init vue@latest

导入vs code 方便操作

初始化的目录如下
在这里插入图片描述

安装依赖库

生成node_modules依赖库和 package-lock.json. 其中package-lock.json用于锁定模块的版本号。

npm install

启动项目

通过Eslint 检查下是否有错误

npm run lint

> openerp@0.0.0 lint
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

 npm run dev
 或者绑定IP
npm run serve -- --host 0.0.0.0

在这里插入图片描述

项目配置

增加路由器

路由器

npm install vue-router@4

安装node

import path from ‘path’，其中path模块来自于node

> npm install @types/node --save-dev

安装ICON 图片

参考

npm i -D unplugin-icons

安装 Element Plus

默认 --save

npm install element-plus --save

//安装图标
npm install @element-plus/icons-vue
//自动导入
npm i -D unplugin-icons

配置自动导入图标

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

在线检查组件的状态

npm i -D vite-plugin-inspect

tsconfig.json

Init file

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.node.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "types": ["node"]
  }
}

省去写全路径

    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"],
      "components/*":["src/components"],
      "api/*":["src/api"],
      "view/*":["src/view"],
      "util/*":["src/util"]
    },

增加自动导入的组件

TS文件找不到组件，需要重启vs code

"include": ["env.d.ts", "auto-imports.d.ts", "components.d.ts", "src/**/*", "src/**/*.vue"],

eslint 找不到组件，‘ElMessage’ is not defined.eslint

先导入 eslintrc: { enabled: true }

AutoImport({
      resolvers: [ElementPlusResolver()],
      eslintrc: { enabled: true }
    }),

安装 Axios 调用API

npm install axios

样式表

安装 SASS

npm install --save-dev sass