尚品汇项目学习记录

尚品汇项目学习记录系列文章

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、项目技术栈

vue2+webpack+router

二、使用步骤

1.安装node、webpack、淘宝cnpm镜像

使用vue脚手架创建项目目录vue_shop（示例）：
进入到需要创建项目目录的文件夹，比如我希望，输入命令：vue create vue_shop
出现如下界面，因为项目使用vue2开发，所以选择 Default ([ Vue 2 ]) babel,eslint)，回车

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

2.使用vue_cli初始化项目

接下来开始通过vuecli脚手架创建项目：

Vue CLI v4.5.15
✨  Creating project in C:\Users\Administrator\VUE\vue_shop.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

[..................] / idealTree:vue_shop: sill idealTree buildDeps

出现这个提示说明项目已经初始化完毕

🎉  Successfully created project vue_shop.
👉  Get started with the following commands:

 $ cd vue_shop
 $ npm run serve

创建好的项目目录如下：

目录说明：
node_moudles： 存放项目依赖
public： 存放静态资源，如css，图片。webpacj打包时会原封不动的打包到dist文件夹里
src： 源代码文文件
– assets：放多个组件共用的静态资源，webpack打包时会把它作为一个模块打包到js文件夹里
– components：存放非路由组件，一般组件
– App.js 整个项目唯一的根组件
–main.js 主入口文件
–gitigore 这个是和git相关的文件
–babel.config.js 这个是babel（可以把es6的语法翻译成es5的语法）相关的配置文件
–package.json 项目“身份证”，记录项目信息（项目名，项目版本，项目怎么运行，有哪些依赖）
–package-lock.json 缓存性的文件
–README.md

3.运行项目

进入到项目目录文件，开启终端，输入命令 npm run serve 即可启动项目

4.修改配置文件

a，修改启动方式

上面的启动方式不会自动打开浏览器，需要手动输入终端里的地址访问，不是很方便。
如果想要浏览器自动打开，需要在配置文件package.json做下设置：

“scripts”: {
“serve”: “vue-cli-service serve”, 默认设置
},

让浏览器自动打开，在"serve": “vue-cli-service serve”, 配置项最后加上 --open（–前面有空格）

“scripts”: {
“serve”: “vue-cli-service serve --open”,
},

b，关闭Eslint效验功能

方法：在根目录下创建vue.config.js文件，这个文件对外暴露1个对象

moudle exports {
// 关闭eslint
lintOnSave:false
}

c，给文件夹src取个别名。很多时候src里的文件需要相互引用，就要用到./ 或 …/ 或 …/…/，这样用起来不是很方便。可以给src取个别名@

方法：在根目录下创建jsconfig.json文件，输入代码

{
“compilerOptions”:
{
“baseUrl”:"./",
“paths”: {"@/": [“src/”] // 输入@就代表src ，
},
“exclude”: [“node_modules”, “dist”] // 表示@除了node_modules和dist文件以外其它地方能使用
}
}

5.项目路由分析

前端路由，就是key-vale键值对
key：路径
value：路径对应的组件

接着看怎么拆分组件，拆分组件就得先看结构
本项目分上中下三部分（头部，内容区，尾部），在中间内容（home组件）和搜索页（search组件）发生跳转变化时，头部和尾部不变。所以组件可以分为以下两类：

路由组件：

home组件、search组件，login，register

非路由组件：

header组件，footer组件（登陆和注册页不显示foote组件，可以通过v-if/v-show控制）

6.安装vue_router：

npm i --save vue-router

安装node插件时 加上 --save的目的是会自动把模块和版本号添加到package.json的dependencies部分
检测插件有没有安装可以去packge.json配置文件查看，如下表示已经安装vue-router：

“dependencies”: {
“core-js”: “^3.6.5”,
“less”: “^3.13.1”,
“less-loader”: “^5.0.0”,
“vue”: “^2.6.11”,
“vue-router”: “^3.5.3”
},

6.安装less

npm i --save less less-loader@5

less需要安装版本5，版本过高会有问题
安装好less后，在组件的style标签需要增加属性 lang=“less”

---

总结

第一天主要了解如何使用vue-cli脚手架初始化vue项目，并了解vue项目结构以及如何拆分组件，安装vue-router插件。

三、开始项目

1. 配置路由

路由组件的搭建：

compoents：主要放一般组件（非路由组件）
pages/views：用来存放路由组件

路由配置

路由配置文件一般放在router文件夹下，名为index.js
index.js文件代码：

// 路由配置文件

//1，首先引入vue，因为vue-router是vue的1个插件
import Vue from 'vue'
//2，引入vue-router 路由插件
import VueRouter from 'vue-router'
//3，在vue中使用vue-router插件
Vue.use(VueRouter)
// 依次引入需要配置路由规则的组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
// 开始配置路由，首先需要把这个路由对象暴露出去
export default new VueRouter({
   
//Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式。
    mode:'hash',
 // 配置路由规则，路由规则是个数组
    //  配置哪个路由的规则就需要先把这个组件引入
    routers: [
        {
   
            path: '/',
            meta: {
    title: '网站首页' },
            redirect:'/home'
        },
        {
   
            path: '/home',
            components: Home,
            meta: {
    title: '网站内容页' }
        },
        {
   
            path: '/register',
            components: Register,
            meta: {
    title: '用户注册' }
        },
        {
   
            path: '/login',
            components: Login,
            meta: {
    title: '用户登陆' }
        },
        {
   
            path: '/search',
            components: Search,
            meta: {
    title: '搜索页面' }
        }
    ]
 })

特别注意运行时发现以上路由配置代码出现了2个问题导致路由不生效：

1，routes 写成了 routers （多个路由规则，不是多个路由器规则）
2，components 写成了 component （访问路径时显示指定组件，不是显示多个组件）

2.在入口文件main.js注册路由配置文件

引入路由

import router from ‘@/router’

在vue构造函数里面注册路由（router:router 的key：value形式可简写为router）

new Vue({
render: h => h(App),
// 注册路由
router,
}).$mount(’#app’),

main.js代码：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引入路由
import router from '@/router'
new Vue({
   
  render: h => h(App),
  // 注册路由，当在这里写了router时组件身上就有了$route和$router属性
  router,
}