尚品汇项目笔记01

一、初始环境安装
本项目使用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

3.vue文件目录分析

public文件夹:一般放置一些静态资源 (图片)，需要注意，放在public文 件夹中的静态资源，webpack进 行打包的时候,

会原封不动打包到dist文件夹中。

src文件夹(程序员源代码文件夹):

assets文件夹:一般也是放置静态资源(一般放置多个组件共用的静态资源)，需要注意，放置在assets文件夹里面静态

资源，在webpack打包的时候，webpack会 把静态资源当做一个模块，打包JS文件里面。

components文件夹: -般放置的是非路由组件( 全局组件)

App.vue:唯一的根组件，Vue当中的组件( .vue )

main.js:程序入口文件，也是整个程序当中最先执行的文件

babel. config. js:配置文件(babel相关)

package. json文件:认为项目“身份证’，记录项目叫做什么、项目当中有哪些依赖、巧

package- lock. json:缓存性文件

4.项目的其他配置

 1.项目启动

终端输入

npm run serve

 项目自启动，使浏览器自动打开

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

2.关闭自动校验功能

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

二.项目路由

1路由的一个分析

确定项目结构顺序:上中下 -----只有中间部分的V在发生变化，中间部分应该使用的是路由组件

2个非路由组件|四个路由组件

两个非路由组件：Header 、Footer

路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）

5.2安装路由

 cnpm install --save vue-router

--save:可以让你安装的依赖，在package.json文件当中进行记录

5.3创建路由组件【一般放在views|pages文件夹】

5.4配置路由，配置完四个路由组件

6)创建非路由组件（2个：Header、Footer）

非路由组件使用分为几步:

第一步：定义

第二步：引入

第三步：注册

第四步:使用

非路由组件的结构的搭建：

结构 + 样式 +图片资源

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法

1：安装less less-loader@5

切记less-loader安装5版本的，不要安装在最新版本，安装最新版本less-loader会报错，报的错误setOption函数未定义

2:需要在style标签的身上加上lang="less",不添加样式不生效

1.写法不同：
    一般组件：<Demo/>
    路由组件：<Route path="/Demo" component={Demo} />
2.存放文件夹位置不同：
    非路由组件：components
    路由组件：pages
3.接收到的props不同（根本区别）：
    一般组件：组件标签写什么值就传什么值
    路由组件：一定会接收到路由的信息（history、location、match等），也可以传自定义的属性值
 

编程式导航

7)路由的跳转

路由的跳转就两种形式：声明式导航（router-link：务必要有to属性）

                    编程式导航push||replace

编程式导航更好用：因为可以书写自己的业务逻辑

//编程式导航
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
                        搜索
                    </button>
 methods:{
        goSearch(){
        this.$router.push('search')
    }
    }
//声明式导航
 <!-- 声明式导航要有to属性 -->
<router-link to="/login">登入</router-link>
 <router-link to="/register">|免费注册</router-link>