项目笔记1（尚品汇）

项目创建与配置以及非路由组件与路由组件

项目创建与配置

首先利用脚手架创建项目，具体步骤如下。
在桌面新建一个名为SPH的文件夹。进入后打开命令行，如下图所示。输入vue create app。之后选择vue2，生成项目。

项目生成之后进行配置。配置三个地方。
1浏览器自动打开
在package.json文件中找到

"scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

2.关闭eslint校验工具
创建vue.config.js文件（在app项目文件下创建）：需要对外暴露

module.exports = {
   lintOnSave:false,
}

3.src文件夹的别名的设置
首先创建jsconfig.json文件（在app项目文件下创建）

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

非路由组件与路由组件

分析尚品汇网站的页面布局，发现Header和Footer是可以反复利用的，因此可以将这两部分作为非路由组件。而页面可以展示的首页、登录页、注册页、搜索页则是变化的，因此这四部分可以作为路由组件进行切换。

非路由组件

首先在src文件夹下创建components文件夹用以存放非路由组件。
将静态页面中写好的内容存放在vue文件中的template内，将所需的css样式存放在vue文件中的style内。如果组件需要图片等内容，就新建一个文件夹存放图片。最终结果如图所示。

构建完成通用的非路由组件后页面效果如图所示。

路由组件

非路由组件构建完成后，开始构建路由组件。与非路由组件不同，路由组件通常存放在src文件夹下的pages文件夹或者views文件夹。创建4个路由组件文件夹，分别为Home、Login、Search、Register每个文件夹都建立一个index.vue文件，用以书写组件内容。如图所示。

创建完成后，开始设置路由。为了使用路由，首先打开终端，输入

npm i vue-router@3(安装淘宝镜像更快)

安装完成后，在src文件夹中创建router文件夹，创建index.js文件配置路由。
首先引入vue与vue-router，引入完成后使用vue-router插件，随后引入刚才创建的四个路由组件并且进行配置。如下图所示。
配置完成之后，找到main.js文件，对路由进行注册，如下所示。

注册完成之后回到app.vue文件中，将路由组件通过router-view展示到页面中，如下所示。

至此页面效果如下所示

为了实现打开页面时默认是首页的功能，需要在路由的index,js文件中设置重定向。具体设置如下所示