共计 2157 个字符，预计需要花费 6 分钟才能阅读完成。
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
公众号 - 归子莫，小程序 - 小归博客
