关于前端:Vue-撩起头盖来让我看看你初始化与学习Vue项目

Vue 撩起头盖来，让我看看你（初始化与学习 Vue 我的项目）

博客阐明

文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！

Vue 简介

置信都听过 vue，毕竟有一句话，前端会 vue 就行，额，这句话还有待切磋，这里不做探讨。

官网介绍

地址

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的 渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或既有我的项目整合。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能为简单的单页利用提供驱动。

介绍

一款不便操作，不便学习，不便工作的前端敲门砖。

Vue 的特点

1、体积小

2、更高的执行效率（虚构 DOM）

3、双向数据绑定（更加关注业务操作）

4、组件化开发

5、渐进式（能够嵌入局部 vue 的代码）

装置

// 是否装置 vue
vue -V 

// 呈现版本阐明已装置
@vue/cli 4.5.8

// 装置 vue
npm install vue

页面引入

能够在 html 中引入 vue 的 js 应用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

vue-cli

Vue 提供了一个官网的 CLI，为单页面利用 (SPA) 疾速搭建繁冗的脚手架。它为古代前端工作流提供了开箱即用的构建设置。只须要几分钟的工夫就能够运行起来并带有热重载、保留时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

装置

// 全局装置 vue-cli
npm install --global vue-cli

创立一个 vue 的我的项目

进入本人工作目录

vue init webpack projectNmae

初始化我的项目的配置

抉择配置好对应的参数，刚开始学习 vue 我的项目时能够抉择应用如上的配置

运行

进入到我的项目目录

npm install // 装置我的项目依赖
npm run dev  // 运行

关上运行的地址

Vue 的我的项目目录

一张图解释 vue-cli 生成的目录，pages 是我本人加上的，pages 放入页面，component 放入一些专用的组件。

其实对于 build 和 config 目录须要具体的解释一下，不过看了一下题目，还是抉择吧 src 这个目录来做掀起头盖的棍吧。次要看一下 router，是不是有一种感觉，router 这个词经常出现，它就是路由。

Vue 路由

路由让咱们能够设置不同的参数，通过咱们起的服务器加上在 router 外面配置的参数，也就是门路，这样就实现了多个页面存在同一个地址，且能够重复相互跳转。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LongTouch from '@/pages/LongTouch/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/long-touch',
      name: 'LongTouch',
      component: LongTouch
    }
  ]
})

子路由

当然这个路由的配置也能够设置子路由，设置子路由时，须要留神门路的拼接。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ImgPage from '@/components/ImgPage'
import LongTouch from '@/pages/LongTouch/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path: '/img',
              name: 'img',
              component: ImgPage,
        }
      ]
    },
    {
      path: '/long-touch',
      name: 'LongTouch',
      component: LongTouch
    }
  ]
})

路由跳转

在日常的业务中，对页面进行跳转时不可避免的硬性需要，跳转能够通过应用 html 和 js

应用 router-link 形式（html）

<router-link :to="{name:'user', params: { userId: 1}}">User</router-link>

应用 router.push()（js）

router.push({name: 'user', params: { userId: 1}})

思考

到了这里能会了啥？根本理解了 vue，装置初始化一个 vue-cli 我的项目，理解它的根本目录，可能运行起来，理解了路由，能够做到页面的跳转，能够做一些跳转的交互。

感激

万能的网络

以及勤奋的本人，集体博客，GitHub 测试，GitHub

公众号 - 归子莫，小程序 - 小归博客