vue-从vue-cli一步步启航

最新推荐文章于 2022-06-27 20:50:48 发布

ColdWolf

最新推荐文章于 2022-06-27 20:50:48 发布

阅读量445

点赞数 1

本文链接：https://blog.csdn.net/ColdWolf/article/details/86770873

版权

javscript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

vue-cli

1 篇文章 0 订阅

订阅专栏

前言

之前web前端库一直使用的Extjs，也是通过Extjs，对javascript有了比较深入的了解。虽然现在很少做开发了，但是Extjs确实很优秀，最近又开始手痒，想做点什么，同时想找一个新的前端框架。

2018年底的时候，了解到Vue，通过菜鸟教程的在线测试尝试了下，感觉非常犀利。随后用它来做了一个刷卡考勤的小应用，对其数据、逻辑及界面的分离强大机制有了进一步的体会，一个字，牛。遂想进一步深入学习，能够熟练掌握致可用于项目开发的程度。但是稍微一搜索，发现前端技术的变化真的太大了，发现自己已经脱离主流了。javascript的玩法已经有了太多的发展，之前一个记事本打天下的时代正在远去，javascript居然也可以预编译了，好吧，就从vue开始再次回归程序猿。

（题外：2018年底，开始从MyEclipse转入IDEA，开始通过gitee同步代码，开始了解到javascript可以预编译...，真的脱离技术圈太久了）

需要稍微知道的东东

刚开始接触vue的时候，被一堆名词弄得神魂颠倒，几乎准备放弃，不过vue真的太优秀了，让我欲罢不能，遂开始一个个攻坚，对node.js，npm，webpack，脚手架等有了初步的了解，相关概念整理如下，跟我一样的童鞋可以看看。

node.js

其官网定义是：Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

百度解释为：Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

所以，node.js不是一个javascript框架或是某种语法，而是一个javascript的运行平台，类似java虚拟机，通过node.js，可以让javascript脱离浏览器就可以运行，甚至运行在服务端。

想深入学习可移步菜鸟教程的node.js章节。必须指出，菜鸟教程对于node.js的解释--简单的说 Node.js 就是运行在服务端的 JavaScript--有误。

node.js其实跟vue关系不大，所以如果只是想使用vue，安装node.js，有这个环境就ok了。至少现阶段还没有发现vue对node.js存在任何依赖。至于为什么需要node.js，我想只是要使用其对ES6的支持，支持vue的模块化和单文件。想进一步了解，推荐看《彻底搞清楚javascript中的require、import和export》，这篇文章对javascript的发展有一个比较全面的介绍。

npm

目前网上很多vue的学习资料，上手就要使用npm，虽然vue的官方文档建议不要一开始使用vue-cli，但是vue真的太容易入手了，你马上就越过了“开始”这个阶段，于是npm是绕不过的坑。

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package；即，代码模块）（--npm 中文文档）

NPM是随同NodeJS一起安装的包管理工具，安装node.js后，在命令输入

npm -v

如果能够正确显示版本号，就是安装成功了

同样的，学习vue的现阶段，没必要对npm过多的关注，按照教程敲命令就好，深入的配置可以留到以后。

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。（webpack的中文网站。）

刚接触，我对这个东东也不了解，先写这里，以后有更多的了解再说。

开始撸vue

vue有所谓的全家桶，这是个大目标，先是实现下小目标吧：

撸个自己vue单文件程序，并且把各文件的关系弄清楚。

热身

关于模板语法，条件什么的，看vue的官方网站或者类似菜鸟教程vue专栏在线尝试，实践几次就很好理解了。

但是作为记事本年代过来的javascript写手，我头痛的是所谓的脚手架，不过网上也有一步一步的超详细教程，譬如《vue-cli（vue脚手架）超详细教程》，按教程撸一遍，node.js，npm（注意：慢的话，使用淘宝镜像），什么的都有了，然后还有一个可以运行vue的demo

淘宝镜像注册：

npm install -g cnpm --registry=https://registry.npm.taobao.org

ok，如果你按照上面的教程，认真走了一遍，那么应该已经有一个可以运行的vue程序了，像下面这样：

我们的实践，就从这里开始，通过解刨这个自动创建的程序，知道如何加入自己的模块，从而踏上入坑之旅。

文件结构

要想加入自己的模块，就先要了解基于脚手架的vue的文件结构不是。vue-cli创建项目后，项目文件下会有一大堆文件（这些文件的说明，可以看上节推荐的超详细教程），但是跟我们直接相关的，现阶段只有一个，就是“src”

进入src，我们看到的目录结构是这样的：

assets文件夹用来存放资源，譬如图片什么的。
components是核心，用来存放模块文件，就是.vue文件，我们的主要代码应该在这里
router实例化了一个vue-route，定义了路由节点，之后解刨
App.vue是一个首页的模块，会替换index.html中的<div id="app">这这个节点。
main.js，是整个系统的入口文件。

既然main.js是入口，我们就从这个文件开始入手

main.js

import Vue from 'vue'
import App from './App'       //引入了app.vue，并且取名字为App
import router from './router' //引入路由

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,                     //注入路由
  components: { App },        //注册组件App，就是在上面引入app.vue时取得名字
  template: '<App/>'
})

这文件，是整个程序的入口。首先实例化vue对象，并且传入了：路由、app组件，指定了渲染模板。

app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>                  <!--路由输出口-->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这是一个标准的组件文件，包括：template、script、style三个部分。

这个组件最关键的地方就是定义了<router-view/>节点，所以当我们还不了解路由的时候，会觉得helloworld怎么出现会莫名奇妙，下面在路由里面我们结合一起讲。

rotuer

router文件夹下面，包含一个index.js文件，其代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'    //引入helloword组件

Vue.use(Router)

export default new Router({
  routes: [
    { //根结点，将默认渲染在app.vue定义的 <rotuer-view/>路由输出位置
      path: '/',      //根路径
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

这个文件的功能包括：引入路由；引入组件，创建路由节点。

一个路由节点，相当于一个页面，在 path参数指定其路径，然后就可以在<router-link to="path">来访问。具体怎么做，我们在后面的实战中接着说。

请注意：这个helloworld节点，其path是'/'，是一个根路由节点，也就是是什么在app.vue没有显示引入hellworld的时候，该组件会显示出来，因为加入路由后，其默认显示的原因。

components

这个是组件目录，目前里面只有一个helloworld组件。在这个demo中，helloworld组件是首页。下面有具体的自建组件环节，就不对helloworld组件进行剖析。

下面开始动真格的了。

加入自己的组件

现在的程序中，有两个组件app.vue和helloworld.vue，并且通过路由将helloworld显示在app组件里面，在传统html结构下，其结构如下：

我们可以认为app.vue是一个html页面，里面有一个<iframe>（这里是<router-view>），嵌入了helloworld.html页面。我们的改动就是形成下面的结构：

即在app组件加入两个路由链接“P1"，”P2"，点击链接，可以导航到不同的页面组件。

需要的操作包括：添加一个MyPage的组件，编写路由节点，在App中增加路由链接，在路由中定义路由节点。

编写自己的组件

我们在components的文件夹下，增加一个Mypage.vue文件。输入代码如下：

<template>
  <div class="hello">
    <h1>这是自创的牛x组件</h1>
  </div>
</template>

<script>

export default {
  name: 'Mypage',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>

这个组件目前就是显示一段吹牛的文字，啥也没有，所以进一步的：再引入一个组件：

继续在components文件夹下创建MyInput.vue文件：

<template>
  <div >
    请输入你的大名吧：
    <input type="text" /><br>
    <h2>{{msg}}</h2>
  </div>
</template>

<script>
export default {
  name: 'Myinput',
  data () {
    return {
      msg: '你已经成为大牛一样的人物啦！'
    }
  }
}
</script>

并且在Mypage文件中，引入并注册myinput组件

import myinput from './MyInput.vue'


components:{
  myinput
}

修改后的mypage.vue代码如下：

<template>
  <div class="hello">
    <h1>这是自创的牛x组件</h1>
    <myinput/>        <!--自定义组件渲染在这里-->
  </div>
</template>

<script>
import myinput from './MyInput.vue'        //引入自定义组件

export default {
  name: 'Mypage',
  components:{                             //注册自定义组件
    myinput
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>

现在组件已经创建好了，下面就是把显示到页面上去。

增加路由节点

打开router目录下的index.js文件，引入mypage组件，并设置节点参数

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'    //引入helloword组件
import Mypage from '@/components/Mypage'            //引入Mypage组件

Vue.use(Router)

export default new Router({
  routes: [
    { //根结点，将默认渲染在app.vue定义的 <rotuer-view/>路由输出位置
      path: '/',      //根路径
      name: 'HelloWorld',
      component: HelloWorld
    }, { //mypage节点
      path: '/mypage',      //路径
      name: 'Mypage',
      component: Mypage
    }
  ]
})

这里，我们将mypage的路径设置为"/mypage"，记住了。

在app.vue加入链接

<template>
  <div id="app">
    <img src="./assets/logo.png"><br>
    <router-link style="font-size:25px" to="/">p1</router-link>
    <router-link style="font-size:25px" to="/mypage">p2</router-link>
    <router-view/>                  <!--路由输出口-->
  </div>
</template>

在app.vue的模板中，加入<router-link>节点，并且to分别指向"/"和"/myage"，就是在router/index.js中定义的path，一切完成后，见证下奇迹。

最终效果

界面进入，显示"/"节点，点击"p2"，导航到mypage节点：

后记

本项目使用的是idea编辑环境。创建一个项目，然后再idea的终端，使用npm命令即可。

下次准备把组件之间的参数传递关系搞下，搞完了再整理成文。

刚学vue，第一次写vue的文档，不妥之处请指正。学习过程中，参考了大量牛人的资料，在此谢谢了。

ColdWolf

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-从vue-cli一步步启航

目录前言需要稍微知道的东东node.jsnpmwebpack开始撸vue热身文件结构main.jsapp.vuerotuercomponents加入自己的组件编写自己的组件增加路由节点在app.vue加入链接最终效果后记前言之前web前端库一直使用的Extjs，也是通过Extjs，对javascript有了比较深入的了...
复制链接

扫一扫