项目介绍:此项目是基于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自带的配置。

解决方法:

第一步:

第二步:

第三步:

                

技术
今日推荐
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信