vue项目详解

目录

  • 创建Vue项目

    • Vue项目环境搭建#
    • Vue项目创建#
    • pycharm配置并启动vue项目#
    • vue项目目录结构分析#
  • 项目生命周期
  • 添加组件-路由映射关系
  • 文件式组件结构
  • 配置全局css样式
  • 子组件的使用
  • 组件的生命周期钩子
  • 路由逻辑跳转
  • 路由传参配置
    • 问号携带参数 : ?id=1#
    • 路由有名分组携带参数: /course/1/detail#

创建Vue项目

Vue项目环境搭建#

Copy1) 安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/

2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3) 安装vue项目脚手架
>: cnpm install -g @vue/cli

注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force

Vue项目创建#

Copy1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化

pycharm配置并启动vue项目#

Copy1) 用pycharm打开vue项目
2) 添加配置npm启动

vue项目目录结构分析#

Copy├── v-proj
|   ├── node_modules    // 当前项目所有依赖,一般不可以移植给其他电脑环境(需要重新构建依赖)
|   ├── public
|   |   ├── favicon.ico // 标签图标
|   |   └── index.html  // 当前项目唯一的页面
|   ├── src
|   |   ├── assets      // 静态资源img、css、js
|   |   ├── components  // 小组件
|   |   ├── views       // 页面组件
|   |   ├── App.vue     // 根组件
|   |   ├── main.js     // 全局脚本文件(项目的入口)
|   |   ├── router
|   |   |   └── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
|   |   └── store
|   |   |   └── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
|   ├── README.md
└   └── package.json等配置文件

移植项目到其他设备:
    1. 一般只需要移植三个文件: public, src和package.json
    2. 在新设备重新构建项目依赖(node_modules)
        1.先cd到需要构建的项目文件夹下
        2.cnpm install

项目生命周期

  1. 浏览器请求"/user"
  2. 通过router下面的index.js映射User.vue组件
  3. User.vue组件替换根组件App.vue中的 <router-view/> 占位符

注意:

Copy1. 使用<roouter-link to=""></roouter-link>进行页面跳转, a标签会刷新页面
2. 视图组件在App.vue根组件中的统一占位符为<router-view/>
3. App.vue根组一般为下面五行
    <template>
        <div id="app">
            // 页面组件占位符
            <router-view/>
        </div>
    </template>

添加组件-路由映射关系

  1. 首先在views页面组件文件夹下文件一个User.vue页面组件
  2. 在router文件夹下面的index.js文件中导入User.vue
  3. 配置路由和User.vue的映射关系
Copyimport Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User'  // 1.导入组件

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
   // 2.添加路由-组件映射关系
    {
        path: '/user',
        name: 'user',
        component: User
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

文件式组件结构

Copy<!--组件的template-->
<template>

</template>

<!--组件的逻辑语法, 固定要export default-->
<script>
    export default {
        name: "Nav"
    }
</script>

<!--组件的样式, scoped标识该样式使局部的, 只在该组件内生效-->
<style scoped>

</style>

配置全局css样式

  1. 在src下面的assets文件夹下新建css文件夹
  2. 在css文件夹下新建global.css全局样式文件
  3. 在main.js中导入该文件
Copy/*自定义全局样式*/
html, body, h1, h2, ul {
    margin: 0;
}

ul {
    list-style: none;
}
Copy<!--在main.js中require导入, @表示src文件夹-->
import '@/assets/css/global.css'
require('@/assets/css/global.css')

子组件的使用

  • 先在父组件中导入
  • 在父组件中注册
  • 在父组件的template中使用
Copy<template>
    <div class="course">
        <!--3.再使用-->
        <Nav></Nav>
        <div>课程</div>
    </div>
</template>

<script>
    // 1.先导入
    import Nav from '../components/Nav'
    export default {
        name: "Course",
        // 2.注册
        components: {
            Nav
        }
    }
</script>

组件的生命周期钩子

  • 就是一个组件从被创建之前到被销毁之后之间的时间节点所触发的方法
  • 这些钩子都是vue对象的下面的成员(方法)
Copy<script>
    import Nav from '../components/Nav'

    export default {
        data() {
            return {
                back_data: ''
            }
        },
        components: {
            Nav
        },
        beforeCreate() {
            console.log('home组件创建之前')
        },
        created() {
            console.log('home组件被创建之后')
        },
        beforeMount() {
            console.log('home组件加载之前')
        },
        mounted() {
            console.log('home组件被加载之后')
        },
        destroyed() {
            console.log('home组件被销毁后')
        }
    }
</script>

路由逻辑跳转

  • this.$router

    控制路由跳转

    • this.$router.push(‘/‘) 跳转到主页
    • this.$router.go(-2) 浏览器后退两步
  • this.$route 控制路由数据
Copy<script>
    export default {
        name: "Nav",
        methods: {
            goHome(){
                // this.$route.path当前路径
                if (this.$route.path !== '/') {
                    // 跳转到主页
                    this.router.push({name: 'home'})
                }
            }
        }
    }
</script>

路由传参配置

问号携带参数 : ?id=1#

  • 问号后面携带的参数会放在 this.$route.query
Copy   // 第一路由传参种路由配置
    {
        path: '/course/detail',
        name: 'course-detail',
        component: Detail,
    },

// ?id=1  -->  query:{id:1}
goDetail(id) {
                this.$router.push(`course/detail?id=${id}`);

                this.$router.push({
                    name: 'course-detail',
                    query: {id:id}
                })
            }
  • 利用<router-link> 标签也能实现让$route中的query对象携带参数跳转
Copy<router-link :to="{ name: 'course-detail',query: {id:course.id}}">
            {{ course.title}}</router-link>

 <router-link :to="`course/detail?id=${course.id}`">{{ course.title}}</router-link>

路由有名分组携带参数: /course/1/detail#

  • 有名分组携带的参会会放在 $this.params
Copy// 第二种路由传参路由配置
    {
        path: '/course/:id/detail',
        name: 'course-detail',
        component: Detail,
    },

// course/1/detail  -->  params:{id:1}
goDetail(id) {
                this.$router.push(`course/${id}/detail`);

                this.$router.push({
                    name: 'course-detail',
                    params: {id:id}
                })
            }

Copy<router-link :to="{ name: 'course-detail',params: {id:course.id}}">
            {{ course.title}}</router-link>

 <router-link :to="`course/${course.id}/detail`">{{ course.title}}</router-link>

原文地址:https://www.cnblogs.com/1012zlb/p/12121947.html

时间: 2024-10-08 22:26:22

vue项目详解的相关文章

关于Vue.use()详解

关于Vue.use()详解 问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter).Vue.use(MintUI).但是用 axios时,就不需要用 Vue.use(axios),就能直接使用.那这是为什么呐? 答案 因为 axios 没有 install. 什么意思呢?接下来我们自定义一个需要 Vue.use() 的组件,也就是有 install 的组件,看完之后就明白了. 定义组件 生成模版 vue init webpack-si

直播项目详解

项目下载地址 项目文件结构: Login : 登录页面集成了友盟第三方登录微信和QQ,新浪授权登录是请求新浪官方的OAuth请求,以及一些登录所需要的资源 Main :主要包含标签视图控制器UITabBarController .导航控制器UINavigationController.数据请求工具类XLLiveTool.业务逻辑类XLDealData.代理类.pch文件和单例的头文件,都是一些全局都能用的东西. Home : 首页,主要包括热门,最新和关注三部分,把这三部分添加到(XLHomeV

eclipse里面构建maven项目详解(转载)

本文来源于:http://my.oschina.net/u/1540325/blog/548530 eclipse里面构建maven项目详解 1       环境安装及分配 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.Maven主要服务于基于java平台的项目构建.依赖管理和项目信息管理,无论是小型的开源类库项目,还是大型的企业级应用,maven都能大显身手. 置于maven的安装过程及在eclipse里面配置maven,请看我在

tomcat通过conf-Catalina-localhost目录发布项目详解 摘自:http://www.cnblogs.com/iyangyuan/archive/2013/09/12/3316444.html

Tomcat发布项目的方式大致有三种,但小菜认为通过在tomcat的conf/Catalina/localhost目录下添加配置文件,来发布项目,是最佳选择. 因为这样对tomcat的入侵性最小,只需要新增一个配置文件,不需要修改原有配置:而且支持动态解析,修改完代码直接生效(修改配置除外). 但是网上关于这种方法的介绍很简单,小菜来补充一下. 1.直接在eclipse中添加一个server,添加过程中指明tomcat的路径即可. 2.在tomcat服务器的conf\Catalina\local

tomcat通过tomcat 安装根目录下的conf-Catalina-localhost目录发布项目详解

tomcat通过conf-Catalina-localhost目录发布项目详解 Tomcat发布项目的方式大致有三种,但小菜认为通过在tomcat的conf/Catalina/localhost目录下添加配置文件,来发布项目,是最佳选择. 因为这样对tomcat的入侵性最小,只需要新增一个配置文件,不需要修改原有配置:而且支持动态解析,修改完代码直接生效(修改配置除外). 但是网上关于这种方法的介绍很简单,小菜来补充一下. 1.直接在eclipse中添加一个server,添加过程中指明tomca

Vue 实例详解与生命周期

Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个 Vue 实例生成.编译.挂着.销毁等过程进行 js 控制. Vue 实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且 Vue 初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作

[转帖](整理)GNU Hurd项目详解

(整理)GNU Hurd项目详解 http://www.ha97.com/3188.html 发表于: 开源世界 | 作者: 博客教主 标签: GNU,Hurd,详解,项目 Hurd原本是要成为GNU操作系统的真正内核,然而它从未真正降临人间.Linus Torvalds曾经写过,如果GNU kernel在1991年春天发布,他不会启动Linux项目.GNU操作系统项目始于1984年,在Linux出现之前它有7到8年的时间创造出一个可用的内核,然而它的开发进程,不时被频繁的改变中断.Richar

Usage、Usage Minimum和Usage Maximum项目详解

(1)一个产生多个数据域(Report Count>1)的主项目之前有一个以上的[用途]时,每个[用途]与一个数据域依次对应,如果数据域个数(Report Count)超过[用途]的个数,则剩余的数据域都对应于最后一个[用途]. (2)Usage.Usage Minimum和Usage Maximum项目关系 这3个项目输入Local类型项目. Usage项目和Global类型的Usage Page项目协同描述项目或集合的功能. 一个报表可以指定一个Usage给许多个Report Count(数

Vue入门系列(五)Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp