初始化创建Vue2项目

1.安装脚手架 

npm i @vue/cli -g

2.创建项目

vue create 自己项目的名称

3.选项

Vue CLI v5.0.8
? Please pick a preset:
       Default ([Vue 3] babel, eslint)
       Default ([Vue 2] babel, eslint)
    > Manually select features     选择自定义创建

4.手动选择功能
5.选择vue的版本  >2.x
6.是否使用history模式
7.选择less预处理器
8.选择eslint的风格 (eslint是代码规范的校验工具)

9.选择校验的时机 (直接回车)

10.选择配置文件的生成方式 (直接回车)

11.是否保存预设,下次直接使用?选N,不保存预设,每次自定义好一些

12.等待项目安装初始化完成

13.进入项目目录,然后npm run serve启动,用浏览器打开终端提示生产的项目本地服务器地址,可以看到vue初始化的vue图标界面

### 创建集成 TypeScript 和 ESLint 的 Vue 3 Vite 项目 要使用 Vite 初始化创建一个集成 TypeScript 和 ESLint 的 Vue 3 项目,可以按照以下步骤进行操作: 1. **使用 Vite 创建 Vue 3 + TypeScript 项目** Vite 提供了内置的模板,可以快速生成支持 TypeScript 的 Vue 3 项目。执行以下命令来初始化项目: ```bash npm create vite@latest my-vue3-ts-project --template vue-ts ``` 该命令会创建一个名为 `my-vue3-ts-project` 的项目,并自动配置 Vue 3 和 TypeScript 的基础环境。 2. **安装项目依赖** 进入项目目录并安装依赖: ```bash cd my-vue3-ts-project npm install ``` 3. **配置 ESLint** 在项目中集成 ESLint 以确保代码风格的一致性。首先安装必要的 ESLint 包: ```bash npm install eslint eslint-plugin-vue eslint-plugin-typescript-recommended @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev ``` 然后在项目根目录下创建 `.eslintrc.js` 文件并配置 ESLint 规则: ```javascript module.exports = { root: true, env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended' ], parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: false } }, plugins: ['vue', '@typescript-eslint'], rules: { // 自定义规则 'vue/no-unused-components': 'warn' } }; ``` 4. **配置 Prettier(可选)** 如果需要进一步统一代码格式,可以集成 Prettier: ```bash npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev ``` 创建 `.prettierrc.js` 文件并配置格式化规则: ```javascript module.exports = { semi: false, singleQuote: true, printWidth: 80, tabWidth: 2, trailingComma: 'es5' }; ``` 更新 `.eslintrc.js` 文件以启用 Prettier 集成: ```javascript extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier' ] ``` 5. **添加 ESLint 检查脚本** 在 `package.json` 中的 `scripts` 部分添加 ESLint 检查命令: ```json "scripts": { "lint": "eslint . --ext .ts,.vue" } ``` 运行以下命令以检查代码: ```bash npm run lint ``` 6. **设置别名(可选)** 如果需要配置路径别名,可以在 `vite.config.ts` 中添加 `resolve.alias` 配置: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, './src') } } }) ``` 7. **运行项目** 最后,启动开发服务器以查看项目是否正常运行: ```bash npm run dev ``` 通过以上步骤,可以成功创建一个集成 TypeScript 和 ESLint 的 Vue 3 Vite 项目,并确保代码风格的统一性和类型安全性。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

热黎姝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值