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
公众号-归子莫，小程序-小归博客
发表回复