前端项目-01-项目搭建

最新推荐文章于 2024-07-07 13:21:06 发布

ycmy2017

最新推荐文章于 2024-07-07 13:21:06 发布

阅读量814

点赞数

分类专栏： # 项目实战-前端-前台系统文章标签： vue

本文链接：https://blog.csdn.net/ycmy2017/article/details/129851920

版权

项目实战-前端-前台系统专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1-项目初始化和搭建

1.1-创建项目

vue create 项目名称

选择vue2（看个人开发的习惯）

1.2-项目目录结构说明

项目目录结构说明：

node_modules:放置项目依赖的地方；

public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

src：程序员源代码文件夹；
        ---assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
        ---components文件夹:一般放置非路由组件（或者项目共用的组件）
        App.vue 唯一的根组件；
        main.js 入口文件【程序最先执行的文件】

babel.config.js:babel配置文件
package.json：看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件

1.3-额外配置（优化）

1-浏览器自动打开

"serve": "vue-cli-service serve --open"加上 --open每次重启项目，浏览器自动打开

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

2-关闭eslint校验工具

如果不关闭，比如我们定义一个变量，没有使用，项目也会报错，开发过程中建议关闭
项目根路径，创建vue.config.js文件：需要对外暴露

lintOnSave:false

3-src文件夹的别名的设置

因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些。

2-路由配置

2.1-路由简介vue-router以及安装

前端路由:K即为URL（网络资源定位符），V即为相应的路由组件
安装vue-router指定版本安装3.5.2：

npm install --save vue-router@^3.5.2

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

2.2-分析和配置路由组件

路由组件：一般放在src/views或者pages文件夹里面

非路由组件：一般就是不随页面跳转发生变化的组件；本项目中两个（Header,Footer）

非路由组件使用:第一步：定义；第二步：引入；第三步：注册；第四步:使用；

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法；所以需要安装less(版本4.1.1) ,less-loader(版本5.0.0)

执行顺序：
npm install --save less-loader@^5.0.0
npm install --save less@^4.1.1

如果需要卸载某个依赖，可以使用npm uninstall命令；例如：npm uninstall less@^4.1.1

2.3-非路由组件

非路由组件：一般就是不随页面跳转发生变化的组件；本项目中两个（Header,Footer）；一般非路由组件放在src/components文件夹下面。

非路由组件的使用四步：定义，引入，注册，使用....

以header为例：

同理，Footer也是这样使用

<template>
  <div>
   <!-- 3-使用-->
    <Header></Header>
    我是根组件12345
    <Footer></Footer>
  </div>
</template>

<script>
//1-引入
import Header from './components/header'
import Footer from './components/footer'

export default {
  name: 'pc_web_sph',
  components: {
    //2-注册
    Header:Header,
    Footer:Footer
  }
}
</script>

<style>

</style>

引入清除默认的样式

ps:测试一种定义方式（可行）

2.4-路由组件

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

vue-router安装指定版本3.5.2
npm install --save vue-router@^3.5.2(2.1章节已经安装)

创建路由组件：一般放在src/views或者src/pages文件夹，本项目再pages文件夹下；

路由信息一般放置在router文件夹

其他的路由都是类似配置，访问http://localhost:8080/#/home跳转到home页面;
访问http://localhost:8080/#/login跳转到login页面；其他类似

ps:输入项目域名或者根路径，应该重定向到home首页
main.js中增加一项配置：

2.5-路由组件和非路由组件的区别

1-路由组件一般是放在src/pages文件夹或者src/view文件夹中；非路由组件一般放置在components文件夹中；
2-路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字）；非路由组件在使用的时候，一般都是以标签的形式使用；
3-注册完路由，不管是路由组件还是非路由组件都有$route和$router属性

2.6-$route,$router介绍

$route：一般获取路由信息【比如路径，query参数，params参数等等】
$router：一般进行编程式导航路由跳转【比如push或者replace】

2.7-路由跳转

路由跳转两种方式：声明式导航(router-link)和编程式导航(push或者replace)

项目中采用哪种方式呢？
声明式导航可以做的，编程式导航都可以做；编程式导航还可以做一些其他的业务逻辑，功能强大一些

2.7.1-登录注册页面跳转

<!-- router-link 必须要有to属性 router-link本质就是a标签-->
<router-link to="/login">登录</router-link>
<router-link to="/register" class="register">免费注册</router-link>

比如这里从首页跳转到登录注册页面，仅仅是页面跳转，那我们可以就使用声明式导航router-link

点击头部那个首页也需要跳转到首页

<!--点击这个图片也跳转到首页-->
<router-link class="logo" to="/home">
    <img src="./images/logo.png" alt="" />
</router-link>

2.7.2-搜索页面的跳转

2.7.3-组件的显示和隐藏

v-show与v-if区别

v-show:通过样式display控制；
v-if：通过元素上树与下树进行操作，比较耗性能，所以一般的显示和隐藏，采用v-show；

Footer组件：在home和search中需要展示；在login和register中需要隐藏

采用元信息来控制：

router/index.js中配置路由元信息，利用路由元信息中字段来控制显示和隐藏

2.7.4-路由传参

路由传参的写法
params参数：属于路径当中的一部分，需要注意，配置路由的时候，需要占位；
query参数：不属于路径当中的一部分，类似ajax中的queryString；比如/home?k=v&k1=v1，配置路由的时候不需要占位；

取值

对象传参：只能使用name属性，不能使用path属性

2.8-重写push和replace方法

编程式路由跳转到当前路由(参数不变)，多次执行会抛出NavigationDuplicated的警告错误?

首先这个警告错误对程序没有影响，可以不处理；但是出现红色，我们可以消除；

路由跳转有两种形式:声明式导航、编程式导航
声明式导航没有这类问题的，因为vue-router底层已经处理好了；

为什么编程式导航进行路由跳转的时候，就有这种警告错误那?"vue-router":“3.5.3": 最新的vue-router引入promise；

通过给push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决；但是这种解决方法治标不治本...需要重写push和replace方法

router/index.js

let originPush=VueRouter.prototype.push
let originReplace=VueRouter.prototype.replace

//重写push方法
//第一个参数:往哪里跳转；第二个参数:成功毁掉；第三个参数:失败回调
VueRouter.prototype.push=function(location,resolve,reject){
    if(resolve && reject){//如果传递了成功和失败回调
        //call和apply区别
        //相同点：都可以调用函数一次，都可以篡改上下文一次
        //不同点：call传递参数用逗号隔开；apply方法执行，传递数组
        originPush.call(this,location,resolve,reject);
    }else{
        originPush.call(this,location,()=>{},()=>{});
    }

}

//第一个参数:往哪里跳转；第二个参数:成功毁掉；第三个参数:失败回调
VueRouter.prototype.originReplace=function(location,resolve,reject){
    if(resolve && reject){
        originReplace.originReplace(this,location,resolve,reject);
    }else{
        originReplace.originReplace(this,location,()=>{},()=>{});
    }

}