0.3、Vue-入口文件的简单介绍：Vue对象、路由、单文件组件

桃扇骨 2022-10-30 05:26 248阅读 0赞

### 文章目录 ###

*   *   *  一图胜千言
         *  命令行初始化一个 Vue 项目
         *  入口文件 main.js
         *   *  main.js 的作用——声明 Vue 对象
             *  main.js 内容解析
             *   *  components
                 *  el
         *  Router 路由功能
         *   *  Router 的声明
             *  Router 注册到 Vue 对象
             *  Router 的使用
             *   *  用于浏览器 url 的处理
                 *  用户在 单文件组件内设置跳转规则
                 *  设置固定导航栏展示内容
         *  单文件组件
         *   *  单文件组件名称和结构
             *  Vue 单文件组件内容举例
             *   *  单文本文件的使用
                 *   *  声明为全局组件
                     *  单文本组件之间的引用

### 一图胜千言 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]

### 命令行初始化一个 Vue 项目 ###

vue init webpack \[项目名称\]  
比如  
vue init webpack vueblog

![在这里插入图片描述][20210705092444819.PNG_pic_center]

### 入口文件 main.js ###

#### main.js 的作用——声明 Vue 对象 ####

Vue 项目有一个入口文件，入口文件将用于声明 Vue 对象，后面的资源将围绕 Vue 对系那个进行。  
比如 Router 插件(页面跳转路由功能)、全局单文件组件

#### main.js 内容解析 ####

下面的代码信息是一个基本的 main.js 文件的内容，其作用是声明一个 Vue 对象，绑定 Router 组件(需要单独的文件，下面介绍)，并且将单文件组件App(需要单独的文件，下面介绍)作为默认的展示内容。

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      //替代el声明的标签内容，<App/> 表示使用单文件组件 App
    ```js
     template: '<App/>'

##### components #####

声明 Vue 对象引用那些 单文件组件，这里使用的是import后的别名  
注意 template 部分，同时使用多个时，需要使用 < div >将它们包含起来

import App from './App'
    import App2 from './App2'
    new Vue({ 
      el: '#app',
      router,
      components: {  App,App2 },
      template: '<div><App/><App2/></div>'
    })

##### el #####

声明页面渲染内容挂载的页面元素，这里为 id=app 的元素  
可移步:[https://cn.vuejs.org/v2/api/\#el][https_cn.vuejs.org_v2_api_el]  
可用 vm.$mount 代替。

*  以下内容等效:

new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })

new Vue({ 
      router,
      components: {  App },
      template: '<App/>'
    }).$mount('#app');

### Router 路由功能 ###

页面跳转的路由规则，需要声明Router对象，并添加到 Vue 对象中。  
声明之后，Vue其他组件内就可以使用对应的规则进行跳转了，可以是跳转到指定单文件组件，也可以是重定向到另一个url链接

#### Router 的声明 ####

> Router 对象内可以设置路由规则，即什么url访问什么组件，或者重定向到哪一个url

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Index from '@/components/Index'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/a',
          name: 'HelloWorld',
          component: HelloWorld
        },
        { 
          path: '/',
          name: 'Index',
          component: Index
        },
         {  path: '/aa', redirect: {  name: 'Index' }}
    
      ]
    })

#### Router 注册到 Vue 对象 ####

这一部分在 Vue 对象中已经讲过，需将 Router 对象注册到 Vue 对象中，上面已经粘贴了代码，这里再粘贴一次

import router from './router'
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })

#### Router 的使用 ####

Router 的使用可以分为三部分

##### 用于浏览器 url 的处理 #####

这个没啥可说的

##### 用户在 单文件组件内设置跳转规则 #####

<template>
    <router-link to="/demo_url">页面将展示一个可跳转url</router-link>
    </template>

![在这里插入图片描述][20210424193246987.png]

##### 设置固定导航栏展示内容 #####

这一点可以认为是将在页面上默认的渲染指定的单文件组件的内容,注意此时 router-link 和 router-view 必须搭配使用

<template>
      <div id="app">
      	  //指定默认访问的url
          <router-link to="/demo_url">
          //指定的url最终对应的单文件组件渲染的位置
          </router-link>
        <router-view/>
      </div>
    </template>

### 单文件组件 ###

单文件组件是可以复用的 Vue 基础单元,可以在 Vue 对象中进行全局声明，也可在具体的单文件组件中单独声明，是可以复用的独立单元

#### 单文件组件名称和结构 ####

名称举例:demo.vue  
template：Dom 结构,和普通 html 标签一样，支持一些 Vue 特殊的语法  
script:js脚本  
style:页面样式

#### Vue 单文件组件内容举例 ####

> 单文件组件本身内可以完成自身的逻辑

<template>
      <div class="hello">
         <router-link to="/abc">一个不存在的链接</router-link>
        <h1>{
       { msg }}</h1>
        <p>{
       {name}}</p>
        <button v-on:click="method1">换个名字</button>
      </div>
    </template>
    
    <script> export default { name: 'Index', data () { return { msg: '你好', name:"jecket" } }, methods:{ method1:function(){ this.name="jecket.wu"; } }, } </script>
    
    
    <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

##### 单文本文件的使用 #####

###### 声明为全局组件 ######

如果声明的文件无法识别，运行 npm install 即可

*  main.js 全局声明，其他组件无需单独声明可直接使用  
    在入口文件 main.js 做出如下声明，即可在其他单文件组件直接使用

import GlobalComponent from './components/GlobalComponent'
    //直接添加现成组件
    Vue.component('GlobalComponent',GlobalComponent)

*  也可以将自定义内容声明为全局组件

import Vue from 'vue'
    import Index from './Index'
    import router from './router'
    import GlobalDemo from './components/GlobalDemo'
    
    Vue.config.productionTip = false
    
    
    /*声明全局组件，可以和单文本文件形成比对*/
    Vue.component('GlobalDemo',{ 
        data: function () { 
          return { 
            count: 0
          }
        },
        template: '<button v-on:click="count++">You clicked me { { count }} times.</button>'
    
    })

###### 单文本组件之间的引用 ######

比如下面，我们想在note.vue 引用SingleDemo.vue,需要两个步骤  
![在这里插入图片描述][20210414004542395.png]  
步骤1：在note.vue 的 script 部分做如下声明

> 注意下面我们将引入一个单文件组件，起名为 SingleDemo

步骤2:也 note.vue 页面 template 部分直接使用，< SingleDemo/>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]: /images/20221024/608329ad717b456095e122804bf87195.png
[20210705092444819.PNG_pic_center]: /images/20221024/5e38422914124801be74493843124d73.png
[https_cn.vuejs.org_v2_api_el]: https://cn.vuejs.org/v2/api/#el
[20210424193246987.png]: /images/20221024/46d35dfa350c4cf492be15306a177683.png
[20210414004542395.png]: /images/20221024/d8b18ab1df21479eb746b4f7769153ab.png