SHP项目第一天

目录

0：node.js

 1:vue-cli脚手架初始化项目

2.项目的其他配置

3.配置vue自动生成的语法模版

4.安装less，组件识别less样式

5安装vue router

6 eslint校验功能关闭

7配置src文件夹简写

8.项目路由分析

  9、完成非路由组件Header和footer

10 配置路由

11路由组件和非路由组件的区别？

12Footer组件的显示与隐藏

13.路由传参

---

0：node.js

首先去node官网下载LTS（长期支持稳定）版本，下载下来后，双击 一步一步安装即可；然后测试安装是否OK，在电脑右下角的搜索框输入cmd回车，打开如下界面，在界面上输入 node --version ，如果出现版本号则安装成功。

安装Node的时候，Npm包管理工具也是一并安装的；
npm -v 

1:vue-cli脚手架初始化项目

打开文件夹的CMD，输入vue create app

出现VUE不是内部命令

查看node版本，v12.16.1

查了一下需要先安装cli

视频需要安装cli3

vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli

一、安装vue cli3
输入如下安装指令：npm install –g @vue/cli

二、命令行输入vue create app

可以执行

三、选择VUE2

2.项目的其他配置

2、1项目运行起来的时候，让浏览器自动打开

--package.json

 "scripts": {

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

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

  在serve后面加open

遇到问题，运行时候要切换到APP文件夹下，

如果打不开，遇到“无法访问此网站网址为 http://0.0.0.0:8080/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址”

实测有效

3.配置vue自动生成的语法模版

（1）安装vue语言

在扩展应用里安装vue language features

（2）安装Vscode插件Vue VSCode Snippets生成Vue模板代码。

快捷键VB+回车

4.安装less，组件识别less样式

先看是否安装webpack

Webpack：5.74.0

Webpack-cli:4.10.0                                    

使用npm install less@4 –save-dev

Less:4.1.3

Npm install less-loader@5.0.0 –save-dev

安装好后是less-loader@5.0.0

如果想让组件识别less样式，需要在每一个页面的style标签的身上加上lang=less。

5安装vue router

版本号：4.1.6但页面是空白，

猜测原因，很有可能是因为路由版本不兼容：解决了，重新安装的3

 npm install --save vue-router@3

vue2中使用的vue-router是3版本，同理vue3中安装4版本的vue-router

6 eslint校验功能关闭

  --在根目录下，创建一个vue.config.js

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

7配置src文件夹简写

 "paths": {
      "@/*": [
        "src/*"
      ]

在jsconfig.json中用@代表src文件夹。

8.项目路由分析

  vue-router

  前端所谓路由即KV键值对

  key：URL(地址栏中的路径)

  value:相应的路由组件

  注意：项目中的上中下结构

  路由组件：

  Home首页路由组件，Search路由组件，login登录路由，Refister注册路由非路由组件：

  Header【首页，搜索页】

  Footer【在首页，搜索页】，但是在登录|注册页面是没有的

 9、完成非路由组件Header和footer

  不以HTML,css为主，主要搞业务，逻辑

  在开发项目的时候：

  1、书写静态页面（html和css

  2、拆分组件

  3.获取服务器的数据动态展示

  4.完成相应的动态业务逻辑

注意1：创建组件的时候，组件结构+组件的样式+图片资源

注意2：项目使用的是less样式，浏览器不识别less样式，需要通过less,less-loader（5版本）进行处理，把less样式变为css样式，浏览器才可以识别。

10 配置路由

路由组件有四个。Home，Search,Login,Register

-components文件夹：经常放置非路由组件（共用的全局组件——

-pages|views文件夹：经常放置路由组件

项目中配置路由一般放在router文件夹中

在router/index.js里面写配置，

在main.js里面写路由入口，

在app.vue里面写路由显示出口。

11路由组件和非路由组件的区别？

1，路由组件一般放置在pages|views文件夹，非路由组件一般放置components文件夹中

2.路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用

3.注册完路由，不管路由路由组件还是非路由组件身上都有$route,$router属性

$route:一般获取路由信息【路由、query,params等等】

$router:一般进行编程式导航进行路由跳转【push|replace]

12Footer组件的显示与隐藏

显示或隐藏组件：v-if|v-show

footer组件：在Home,Search显示Footer组件

footer组件：在登录和注册时是隐藏的

6.1我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏

6.2配置路由的时候，可以给路由添加路由元信息【meta】

(1)在app.vue的时候写

<Footer v-show="$route.meta.show"></Footer>

（2）在router的index.js的下面写

 path:"/home",

            component:Home,

            meta:{show:true},

        }

13.路由传参

路由跳转有几种方式

声明式导航：router-link(务必有to属性)，可以实现路由的跳转

编程式导航：利用的是组件实例的$router.push|replace方法，可以实现路由的跳转。

参数的写法

Param参数：属于路径当中的一部分，需要注意，在配置路由时候，需要占位。

query参数，不属于路径中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位

  在header文件夹的index.vue中的script中export default中建立

  data()

  { return{

            keyword:''

          }

        },}

    并且在搜索前面的文本框中写上v-model="keyword"

    如何传参：需要在router文件夹的Index.js中进行路由占位。

    希望在搜索的时候传递参数：在path 后添加keyword,注意这里一定要加：

       path:"/search/:keyword",

            component:Search,

            meta:{show:true},

        }

      第一种是以字符串形式传递，在header的index.vue中

     （1） //第一种，以字符串形式传递

            goSearch(){

                this.$router.push("/search/"+this.keyword)

            }

       完蛋，配置后点击搜索无反应。  原因：在占位的时候没有加冒号

       传递query参数。在  

       this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase());

       （2）第二种：模版字符串传递      

        this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

        （3）第三种，对象传参的写法最常用

        首先要给路由起一个对象名字，

         // path:"/search",

            component:Search,

            meta:{show:true},

            name:"search",

          然后在header的index中