勇往直前^

B站尚品汇项目学习笔记整理（P1-P10）

课程传送门：尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili

1、初始环境安装

本项目使用vue-cli搭建，需要准备的初始环境有:node.js webpack

安装nodejs对应链接 Node.js

安装webpack对应链接 webpack

上面的初始环境配置好了后，全局安装vue-cli脚手架：

num install -g @vue/cli

2、创建vue-cli项目

在电脑中创建目录 project-SHP

在对应目录下创建项目——创建项目命令：

vue create app

创建好项目后，先了解对应的目录结构

node_modules

项目依赖文件夹

public

静态资源目录，单页面应用SPA就是基于此文件夹中的index.html创建的。

一般放置一些静态资源（图片等），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中

src

程序员源代码文件夹，你所写的代码都在这里

assets	放置静态资源（一般放置多个组件共用的静态资源），在webpack打包时，会把此文件夹中的静态资源当做一个模块打包到js文件中
components	放置非路由组件（全局组件）
App.vue	项目的唯一根组件，vue当中的组件都是.vue
main.js	程序入口文件，也是整个程序当中最先执行的文件

.gitgnore

git忽略文件，一般不碰它

babel.config.js

配置文件，与babel相关，功能很多，比如可以把ES6自动翻译为ES5

package.json

项目信息，类似人的身份证，记录了项目叫什么、有哪些依赖、项目怎么运行等

package-lock.json

缓存性文件，记录了项目中的依赖包是哪里来的，方便后续的扩展和变更

README.md

说明性文件，对于项目创建、运行、安装依赖等，都有基础的语法命令说明

3、项目的其他配置

3.1、项目运行时，浏览器自启动

可以使用下面的命令运行项目：

npm run serve

项目运行后，浏览器不会自动打开，需要手动配置：

package.json文件里面是一个对象，只需要在package.json文件中的script属性里，对应的serve属性值后面加上open即可：

"serve": "vue-cli-service serve --open",

3.2、eslint校验功能关闭

eslint校验很严格，比如声明了的变量，如果没有使用的话，eslint校验工具就会进行报错，对于日常开发来说不太友好，需要进行配置：

在根目录下创建vue.config.js文件，并在其中添加以下代码：

module.exports={
    // 关闭eslint
    lintOnSave:false
}

3.3、src文件夹别名

src目录中的文件很多，对于需要import的目录，可能需要写很多的路径，可以将src目录配置为@

在根目录下创建jsconfig.json文件并添加如下代码：（这个文件是告诉vscode用的，表示说@代表你配置的这个src目录，你之后引入的所有文件，凡是带了@的，都会到对应的src目录中找，而使用exclude将node_modules和dist排除后，vscode就不会在这两个目录里面查找文件了，提高效率）

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

@代表src文件夹，如果将来文件过多，找的时候会很方便

注意：@符简写不应该在node_modules 和dist目录中使用！效率会变低，上面有说明！