从0创建一个好用的Vue3项目(Vite2.9.9)

最新推荐文章于 2023-08-06 22:29:47 发布
最新推荐文章于 2023-08-06 22:29:47 发布
阅读量1.4k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42308300/article/details/128784564
版权

从0创建一个Vue3项目

本文目标是从0搭建一个vue3+vite+ts+pinia+eslint的项目，以及学习和熟悉Vue3的新特性
vite版本2.9.9

搭建vue3+vite+ts+eslint的脚手架

输入以下命令创建一个vue3+ts的脚手架

npm init vite@latest vue3-vite-ts-test0 -- --template vue-ts

1.png

安装并启动项目

npm install --registry=https://registry.npm.taobao.org
npm run dev

2.png

初始页面

3.png

添加Eslint支持(使用Airbnb规则)

安装相关依赖

npm install eslint --save-dev --registry=https://registry.npm.taobao.org
npm install eslint-plugin-vue --save-dev --registry=https://registry.npm.taobao.org
npm install eslint-config-airbnb-base --save-dev --registry=https://registry.npm.taobao.org

添加相关配置

创建.eslintrc.js文件(项目根目录)

module.exports = {
  root: true,
  env: {
    browser: true, // browser global variables
    es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
  },
  parserOptions: {
    ecmaVersion: 12,
  },
}

为了规范团队成员代码格式，以及保持统一的代码风格，项目采用当前业界最火的Airbnb规范，并引入代码风格管理工具Prettier。

module.exports = {
    root: true,
    env: {
      browser: true, // browser global variables
      es2022: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
    },
    parserOptions: {
      ecmaVersion: 12,
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'airbnb-base',
    ],
  }

这时重启项目就可以看到项目使用了刚刚配置的eslint规则，如果没有的话，可以尝试重启编辑器的eslint服务。

4.png

本次项目不单独引入prettier，而是使用eslint插件将prettier作为eslint规则执行。

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

修改.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
  },
  parserOptions: {
    ecmaVersion: 12,
  },
  extends: ['plugin:vue/vue3-recommended', 'airbnb-base'],
  plugins: ['prettier'], // ++
  rules: {
    'prettier/prettier': 'error', // ++
  },
};

配置到此时，大概率会遇到 eslint 规则和 prettier 规则冲突的情况，比如下图。eslint告诉我们要使用单引号，但是改为单引号以后，prettier有告诉我们要使用双引号。

5.png

这时候就需要另一个eslint的插件 eslint-config-prettier，这个插件的作用是禁用所有与格式相关的eslint规则，也就是说把所有格式相关的校验都交给 prettier 处理。

npm install --save-dev eslint-config-prettier

修改.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
  },
  parserOptions: {
    ecmaVersion: 12,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "airbnb-base",
    "plugin:prettier/recommended",
  ],
  plugins: ["prettier"], // ++
  rules: {
    "prettier/prettier": "error", // ++
  },
};

plugin:prettier/recommended 的配置需要注意的是，一定要放在最后。因为extends中后引入的规则会覆盖前面的规则。

我们还可以在根目录新建 .prettierrc.js 文件自定义 prettier 规则，保存规则后，重启编辑器的eslint服务以更新编辑器读取的配置文件。

创建.prettierrc.js文件(项目根目录)

// .prettierrc.js
module.exports = {
  singleQuote: true, // 使用单引号
}

其他规则配置

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

修改.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
  },
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'], // ++
  rules: {
    'prettier/prettier': 'error', // ++
  },
};

适配@通配符

在tsconfig.json中添加如下配置

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

tsconfig.json完整示例

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

在.eslintrc.js中添加如下代码

  settings: {
    'import/resolver': {
      typescript: {},
    },
  },

.eslintrc.js完整示例

module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
  },
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
    'vue/multi-word-component-names': 'off',
  },
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
};

安装eslint-import-resolver-typescript插件

npm install --save-dev eslint-import-resolver-typescript

安装@types/node模块

npm install --save-dev @types/node

在vite.config.ts中配置

  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src'),
      },
      {
        find: 'assets',
        replacement: resolve(__dirname, './src/assets'),
      },
    ],
    extensions: ['.ts', '.js'],
  },

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: [
      {
        find: '@',
        replacement: resolve(__dirname, './src'),
      },
      {
        find: 'assets',
        replacement: resolve(__dirname, './src/assets'),
      },
    ],
    extensions: ['.ts', '.js'],
  },
});

重启项目即可

解决Missing file extension “ts” for "./XXX"的问题

// 在rules下

    'import/extensions': [
      2,
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],

修改后的.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
  },
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
  rules: {
    'prettier/prettier': 'error',
    'vue/multi-word-component-names': 'off',
    'import/extensions': [
      2,
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'import/no-extraneous-dependencies': 0,
  },
};

解决’vite’ should be listed in the project’s dependencies, not devDependencies的问题

// rules下

    'import/no-extraneous-dependencies': 0,

修改后的.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
  },
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
  rules: {
    'prettier/prettier': 'error',
    'vue/multi-word-component-names': 'off',
    'import/extensions': [
      2,
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'import/no-extraneous-dependencies': 0,
  },
};

添加sass支持

npm install sass --save-dev --registry=https://registry.npm.taobao.org       
npm install sass-loader --save-dev --registry=https://registry.npm.taobao.org

添加vue-router

安装

npm install vue-router@4

创建并绑定vue-router

1.创建src/router文件夹以及src/router/index.ts文件

6.png

2.编写路由文件index.ts

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: 'main',
    },
    {
      path: '/main',
      name: 'main',
      component: () => import('@/views/main/index.vue'),
    },
  ],
});

export default router;

3.在main.ts中添加router

import { createApp } from 'vue';
import router from './router';
import App from './App.vue';

const app = createApp(App);
app.use(router);
app.mount('#app');

4.修改App.vue应用router-view标签

<template>
  <router-view></router-view>
</template>
<script setup lang="ts"></script>
<style>
#app {
}
</style>

5.编写具体的页面vue文件

这里是’@/views/main/index.vue’文件

<script lang="ts" setup></script>
<template>
  <div>11111111111111111</div>
</template>

*添加UI框架Arco Design

参考文档：https://arco.design/vue/docs/start

安装

npm install --save-dev @arco-design/web-vue

完整引入

import { createApp } from 'vue';
import ArcoVue from '@arco-design/web-vue';
import router from './router';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(router);
app.use(ArcoVue);
app.mount('#app');

添加状态管理pinia支持

安装

npm install pinia

在main.ts中引入pinia

import { createPinia } from 'pinia';
app.use(createPinia());

创建store文件夹并新建ts-store文件

新建store/system.ts

import { defineStore } from 'pinia';

const system = defineStore('system', {
  state: (): {
    name: string | null;
    user: string | null;
    price: number;
    [propName: string]: any;
  } => {
    return {
      name: null,
      user: null,
      price: 10,
    };
  },
  getters: {
    doublePrice(): number {
      return this.price * 2;
    },
  },
  actions: {
    increment() {
      this.price += 1;
    },
  },
});

export default system;

使用store

<template>
  <div>11111</div>
  <div>{{ system.name }}</div>
  <div>{{ system.user }}</div>
  <div>{{ system.doublePrice }}</div>
</template>
<script lang="ts" setup>
import systemStore from '@/store/system';

const system = systemStore();
if (!system.name) {
  console.log('重新赋值【name】');
  system.name = '你好';
}
if (!system.user) {
  console.log('重新赋值【user】');
  system.user = '甲天下';
}
console.log(new Date().getTime());
system.selfname = '家天下';
setTimeout(() => {
  console.log('计时10秒');
  console.log(new Date().getTime());
  system.$reset();
  system.price = 40;
  system.increment();
}, 10000);
</script>
<script lang="ts">
export default {
  mounted() {
    console.log(this);
  },
};
</script>

Vue3新概念(部分解释)

ref

官方解释：https://v3.cn.vuejs.org/api/refs-api.html#ref

接收一个初始值并返回一个响应式且可变的 ref 对象，ref 对象仅有一个 .value property，指向该内部值。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
真亦假假亦真
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue3项目中配置eslint
hello，是翠花呀
08-22 3468
eslint 相关配置 创建好 vue3 项目后，安装npm install --save-dev eslint eslint-plugin-vue ，执行命令初始化 eslint 配置： eslint --init 接下来看命令行执行，根据自己习惯选择相应配置选项。 执行完成后目录下会新增.eslintrc.js文件，同时新安装了几个插件，在package.json中可以看到。 这时候可以开始配置 eslint 具体项了。 比如我们不选用刚刚 init 时选择的规范包，那么可以修改 extends 为e
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue项目设置eslint规则校验
a8725585的博客
08-13 2万+
安装 npm install --save-dev eslint eslint-plugin-vue 配置 "extends": ["plugin:vue/recommended"] 解析器 vscode安装eslint插件 配置vscode自动fix 设置保存时格式化 "eslint.autoFixOnSave": true, 扩展检查.vue文件 关闭编辑器自动保存格式化，避免冲突 ...
Vue3 + Vite3 工程搭建杂记
sinat_18194249的博客
02-27 624
使用Vue3 + Vite 搭建过程遇到的问题总结。
Eslint 检查规则 模板
whn1231的博客
04-15 1652
Eslint 检查规则
代码格式化工具：具体访问：
weixin_44828588的博客
09-15 274
前端代码格式化实践 eslint + prettier：优加实习 需求背景 多人合作开发需要对代码格式进行规范，为了方便和统一我们可以借助前端代码格式化工具，可以借助eslint来规定代码规范，prettier进行代码格式化。 实践（vue项目） vscode配置setting.json文件,写入下面规则，在保存代码时自动格式化代码 { "editor.formatOnSave": true } 复制代码 安装相关依赖（具体用处之后补充） npm i eslint es
vue3 添加eslint校验（eslint-plugin-vue）
James_liPeng的博客
12-10 1万+
vue3的eslint校验
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
全栈修炼
02-02 1万+
尤大的 Vue3.0 已经发布有一阵子了，已经很成熟了。而且 Element Plus + Vite 也出了一段时间了，是时候该上手体验分享一波了。主要是要熟练一下 Vue3，好准备用 ...
【vue3】使用vite搭建的项目需要安装的插件/配置
wusq的博客
04-11 4222
项目基于vite+ts+vant+axios 1.创建项目 项目名称是myProject vue create myProject 2.vetur报错调整 由于vue3引入组件后不用在components中声明，vetur插件会报错 解决办法：vscode设置 -》 搜索vetur -》 找到下面这个选项，把他关掉。然后重新打开文件，发现没有报错了 3.vite2使用eslint校验 安装eslint 执行命令npx eslint --init，按照以下选项配置依赖，会顺带下载四个依赖 下面
Vue项目之配置 Vite + VSCode 使用EditorConfig, Eslint和Prettier实现代码规范
热门推荐
LoveSummer
07-15 2万+
每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space；有的人代码语句后会加上分号，有的人则不加。并且不同的人使用的开发工具也不同，有的人喜欢使用WebStorm，有的人喜欢用VSCode。如果是一个人独立开发，这些当然都没啥问题，自己想怎么写就怎么写。代码规范化之后可能也没法立即看到带来的好处。并且相反，可能在某些人看来反而是一种束缚。但是如果是团队协同开发，代码规范化所带来的好处就很明显。比如，统一团队成员的代码风格，方便后期维护，避免扰乱Git Diff等等。针对以上这些问题，本
vue3+vite项目配置ESlint、pritter插件
一步一个脚印，踏实努力，向着目标前进
08-06 2077
综上所述，ESLint 和 Prettier 插件在统一代码风格、提高代码质量和自动格式化方面具有重要的作用，但需要权衡配置复杂性和灵活性，以及额外的开销。需要注意的是，拆分 JavaScript 和 CSS 文件可能会增加额外的网络请求，因此在进行拆分时需要权衡加载性能和文件数量的平衡。通过以上步骤，你可以在 Vue 3 + Vite 项目中配置 ESLint 和 Prettier 插件，并使用它们来维护代码的质量和风格一致性。使用上述配置后，Vite 将会将每个入口文件的 CSS 提取到单独的文件中。
基于Vue3+Vite的商品管理系统可视化页面源码.zip
08-21
基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品...
vue3+vite创建项目-（傻瓜式教程）
最新发布
01-19
vue3+vite创建项目-（傻瓜式教程）
vite-vue3-template:Vite + Vue3项目模板
03-18
vite-vue3-模板Vue 3 +打字稿+ Vite项目模板
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vite 创建vue3项目 （vue-router、vuex、scss、环境变量、selint、stylelint、normalize.css）
xinbear的博客
06-19 1675
vite 创建vue3项目 （vue-router、vuex、scss、环境变量、selint、stylelint、normalize.css）
reqwest should be listed in the project‘s dependencies, not devDependencies
connordeyi的博客
12-08 5060
reqwest should be listed in the project’s dependencies, not devDependencies 解决方法 #在eslintrc中添加 rules：{"import/no-extraneous-dependencies": ["error", {"devDependencies": true}]} 备注 #该方法可以可以使得前端修改可以忽略该报错顺利提交，但是含有该修改的eslintrc.js本身无法被提交， 目前暂未解决这个问题，如果哪位朋友有解决方
创建一个vue3+vite+typescript的项目
07-28
要创建一个Vue3 + Vite + TypeScript的项目，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Node.js和npm。 2. 打开终端或命令提示符，并进入你想要创建项目的目录。 3. 执行以下命令来创建一个新的Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值