1.创建项目:
npm init vite@latest
npm install
npm run dev
2.npm说明:
npm install 初始化时不会自动下载模块---npm install初始化不会下载模块,需要自己手动下载
方便统一和阅读,文中全部使用简写方式。
-g: 为 --global 的缩写,表示安装到全局目录里,全局位置在哪呢?使用npm root -g
-S: 为 --save 的缩写,表示安装的包将写入package.json里面的dependencies ----npm install 初始化时会自动下载模块
-D: 为 --save-dev 的缩写,仅开发包,在生产中不需要。例如测试包
表示将安装的包将写入packege.json里面的devDependencies----npm install 初始化时会自动下载模块
3.安装sass一般会失败:
npm install node-sass --save-dev
查询版本关系依赖:
https://www.npmjs.com/package/node-sass
安装node版本对应的
npm install node-sass@6.0.0 --save-dev
4..安装element-plus
npm install element-plus --save
5.安装vue-router
npm install vue-router --save
6.安装pinia
pinia和vuex的区别-缓存
由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目,因为一些调试功能,如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。
npm install pinia --save
7.安装eslint和eslint到测试环境官方对.vue的支持:
npm install --save-dev eslint // 安装eslint插件
npm install --save-dev eslint-plugin-vue // ESLint官方提供的Vue插件,可以检查 .vue文件中的语法错误
//在eslintrc.js 配置
{
"extends": ["plugin:vue/vue3-recommended"] // 使用vue3推荐规则
}
安装prettier和 eslint的prettier插件
npm install --save-dev --save-exact prettier // 安装prettier
npm install --save-dev eslint-plugin-prettier // 将prettier作为ESLint插件,
// eslintrc.js 配置
{
extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"], // 使用vue3推荐规则、prettier推荐! 后者替换前者。
}
调整并使用
此时 eslint 规则和 prettier 规则冲突的情况,eslint告诉我们要使用单引号,但是改为单引号以后,prettier有告诉我们要使用双引号。
这时候就需要另一个eslint的插件 eslint-config-prettier,这个插件的作用是禁用所有与格式相关的eslint规则,也就是说把所有格式相关的校验都交给 prettier 处理。
npm install --save-dev eslint-config-prettier
// eslintrc.js 配置
module.exports = {
extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
plugins: ["prettier"],
rules: {
"prettier/prettier": "error",
},
};
展
我们还可以在根目录新建 .prettierrc.js 文件自定义 prettier 规则,保存规则后,重启编辑器的eslint服务以更新编辑器读取的配置文件。
// .prettierrc.js
module.exports = {
singleQuote: true, // 使用单引号
}
通常以上不生效,如果修改(不大推荐)在module.exports修改
module.exports = {
extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
plugins: ["prettier"],
rules: {
"prettier/prettier": ["error", { useTabs: true }],
},
};
8.安装axios
npm i axios --save
9.安装环境变量@符号
npm install @vitejs/plugin-vue -D 具体可搜索插件用法
拓展环境变量,新增 .env.dev .env.text .env.production, https://cn.vitejs.dev/guide/env-and-mode.html#production-replacement 需要注意必须VITE 开头
10.安装兼容,推荐
https://blog.csdn.net/fighting_sunnyGirl/article/details/119727647
安装 "babel-polyfill" 并配置兼容ie11, https://www.npmjs.com/package/vite-plugin-legacy
快速搭建vue3+vite+eslint
最新推荐文章于 2024-03-25 11:18:05 发布