项目介绍:此项目是基于vue2的前台电商项目和后台管理系统
1:vue-cli脚手架初始化项目生成文件的介绍 1.node_modules文件夹:项目依赖文件夹
2.public文件夹:一般放置一些静态资源(如网页图标),在webpack打包时,会原封不动的打包到dist文件夹。
3.src文件夹:
3.1 assets文件夹:一般放置多个组件共用的静态资源,在webpack打包时,会把此静态资源当作一个模块,打包到JS文件中。
3.2 components文件夹:一般放置非路由组件。
3.3 app.vue文件:唯一的根组件。
3.4 main.js文件:程序的入口文件,也是整个程序最先执行的文件。
4.babel.config.js文件:babel配置文件。
5.package.json文件:相当于项目的“身份证”,记录了项目的相关信息(如名字、依赖、运行方式等等)。
6.package-lock.json文件:跟踪被安装的每个软件包的确切版本,以便产品可以以相同的方式被 100% 复制(即使软件包的维护者更新了软件包)。
7.README.md文件:项目的说明性文件
2:项目的其他配置 2.1 项目运行时,让浏览器自动打开
在package.json中更改script项,改为如下代码
"scripts": {
//在后面添加 --open
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
2.2 关闭eslint的校验功能
在根目录中新建vue.config,js文件,文件中配置如下代码
module.exports = {
// 关闭eslint语法校验
lintOnSave:false
}
2.3 给src配置别名,方便引入资源
在根目录中新建jsconfig.json文件,写入如下代码
{
// 配置:用 @ 代替src文件夹
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules","dist"]
}
配置完成之后可能会报错,原因是vscode会自动进行JavaScript的语法检查,自定义的jsconfig.json文件无法覆盖vscode自带的配置。
解决方法:
第一步:
文章图片
第二步:
文章图片
第三步:
文章图片
【尚硅谷电商项目|尚硅谷-尚品汇项目开发总结(第一天)】
推荐阅读
- vue.js|B站尚品汇项目学习笔记整理(P1-P10)
- vue|vue-尚品汇项目 -尚硅谷项目笔记-项目配置
- 前端|JS基本功修炼,一文搞懂JavaScript数组
- #|Vuex在uniapp项目中应用案例
- 前端|vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
- VUE|Vue学习笔记
- VUE|安装与配置axios
- 小小的项目|【HTML——简易 飞机大战 小游戏(效果+代码)】
- html|【HTML——3d粒子特效(效果+代码)】