尚硅谷-尚品汇项目开发总结（第一天）

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

解决方法：

第一步：

第二步：

第三步：