web前端项目创建Vite-Project

Web框架-Web前端项目创建Vite-Project

Node.js*

即使曾经安装过也使用最新版node.js重新安装，自动覆盖。修改到合适分区，例如D:\。其他全部默认，无需安装Chocolatey。

windows是中文用户名可能会有影响。

NPM Settings

进入windows命令行模式，设置npm服务器使用aliyun镜像。复制以下命令，在控制台鼠标右键选择粘帖，回车执行
npm config set registry http://registry.npmmirror.com

Vite Project
https://staging-cn.vuejs.org/guide/quick-start.html#with-build-tools

在合适位置创建vue-workspace工作区目录，存放所有vue项目。

通过命令行，进入工作区，执行项目初始化命令。
npm init vue@latest
选择以下配置。

TypeScript/router/pinia/eslint/prettier✔ Project name: … 
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

VS Vode

下载压缩版vscode，解压运行。安装volar/TypeScript Vue Plugin/eslint，3个插件，重启vs code。

打开项目目录，打开vs code控制台，crtl+`

在控制台视图(默认即是当前项目路径下)，安装依赖。由于配置了国内镜像，下载速度会很快。依赖在100M以上

npm i

启动项目

npm run dev

结束运行，在控制台输入组合键

ctrl+c
eslint/prettier
以eslint检查代码规范，以prettier统一代码风格，并在保存文件时自动修复错误

创建，.prettierrc.json。单引号，无分号，不检测文件结束符格式

{"htmlWhitespaceSensitivity": "ignore","singleQuote": true,"semi": false,"endOfLine": "auto"
}

修改.esintrc.cjs，添加规则

rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','vue/multi-word-component-names': 'off',},

当前项目.vscode目录下，创建settings.json。声明项目的vscode配置

{"editor.fontSize": 18,"window.zoomLevel": 1.0,"editor.wordWrap": "on", "editor.codeActionsOnSave": {"source.fixAll.eslint": true,},"git.enableSmartCommit": true,"workbench.colorTheme": "Default Light+","typescript.updateImportsOnFileMove.enabled": "always","javascript.updateImportsOnFileMove.enabled": "always","explorer.confirmDelete": false,"explorer.confirmDragAndDrop": false,"emmet.triggerExpansionOnTab": true,
}

进入项目

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！