1、启动页面：index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>hcmanage</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

其中 <div id="app"></div> 是用于挂载页面的

2、启动js: main.js

import Vue from 'vue' //引入vue.js

import App from './App' //引入App.vue

import router from './router' //引入router下的所有路由

import './plugins/element.js' //引入element-ui

Vue.config.productionTip = false

new Vue({

  el: '#app',//要挂载的元素ID

  router,

  components: { App },//挂载App组件

  template: '<App/>'

})

3、挂载的App.vue

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <div>

      <p>

        If Element is successfully added to this project, you'll see an

        <code v-text="'<el-button>'"></code>

        below

      </p>

      <el-button>el-button</el-button>

    </div>

    <!--下面JS脚本加载的HelloWorld组件 msg是HelloWorld中要使用的变量-->

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue' //引入HelloWorld.vue

export default {

  name: 'app',

  components: {

    HelloWorld

  }

}

</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>

4、App.vue引入的HelloWorld.vue

<template>

  <div class="hello">

    <!--用于接收加载页面传入的信息-->

    <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <ul>

      <li>

        <a

          href="https://vuejs.org"

          target="_blank"

        >

          Core Docs

        </a>

      </li>

      <li>

        <a

          href="https://forum.vuejs.org"

          target="_blank"

        >

          Forum

        </a>

      </li>

      <li>

        <a

          href="https://chat.vuejs.org"

          target="_blank"

        >

          Community Chat

        </a>

      </li>

      <li>

        <a

          href="https://twitter.com/vuejs"

          target="_blank"

        >

          Twitter

        </a>

      </li>

      <br>

      <li>

        <a

          href="http://vuejs-templates.github.io/webpack/"

          target="_blank"

        >

          Docs for This Template

        </a>

      </li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li>

        <a

          href="http://router.vuejs.org/"

          target="_blank"

        >

          vue-router

        </a>

      </li>

      <li>

        <a

          href="http://vuex.vuejs.org/"

          target="_blank"

        >

          vuex

        </a>

      </li>

      <li>

        <a

          href="http://vue-loader.vuejs.org/"

          target="_blank"

        >

          vue-loader

        </a>

      </li>

      <li>

        <a

          href="https://github.com/vuejs/awesome-vue"

          target="_blank"

        >

          awesome-vue

        </a>

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: ;

}

li {

  display: inline-block;

  margin:  10px;

}

a {

  color: #42b983;

}

</style>

vue学习笔记（三）： 启动说明的更多相关文章

  1. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  2. Vue学习笔记三：v-bind，v-on的使用

    目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...

  3. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  4. vue学习笔记(三)：vue-cli脚手架搭建

    一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入:  npm install -g vue-cli     ...

  5. vue学习笔记三：常见的表单绑定

    <template> <div id="app"> <input type="checkbox" id="checked ...

  6. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  7. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  8. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  9. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  10. Vue学习笔记-vue-element-admin 按装报错再按装

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

随机推荐

  1. Vue 从入门到进阶之路（十三）

    之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...

  2. Linux系统：centos7下搭建Rocketmq4.3中间件，配置监控台

    本文源码:GitHub·点这里 || GitEE·点这里 一.环境搭建 环境版本 centos7 jdk1.8 已搭建好 rocketmq4.3 1.下载安装包 网址 https://www.apac ...

  3. 基于STM32F429，Cubemx的SAI音频播放实验

    书接上文:https://www.cnblogs.com/feiniaoliangtiangao/p/11060674.html 和 https://www.cnblogs.com/feiniaoli ...

  4. 匿名函数,内置函数II,闭包

    1. 匿名函数 匿名函数,顾名思义就是没有名字的函数,那么什么函数没有名字呢?这个就是我们以后面试或者工作中经常用匿名函数 lambda,也叫一句话函数. 现在有一个需求:你们写一个函数,此函数接收两 ...

  5. .netcore控制台->定时任务Quartz

    之前做数据同步时,用过timer.window服务,现在不用那么费事了,可以使用Quartz,并且配置灵活,使用cron表达式配置XML就可以.我用的是3.0.7版本支持.netcore. 首先创建一 ...

  6. 松软科技web课堂:SQLServer之MIN() 函数

    MIN() 函数 MIN 函数返回一列中的最小值.NULL 值不包括在计算中. SQL MIN() 语法 SELECT MIN(column_name) FROM table_name 注释:MIN ...

  7. layui-table-column-select（layui数据表格可搜索下拉框select）

    layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...

  8. 零基础建站如何配置PHP运行环境 几种服务器环境配置的选择和方法

    上次给大家分享了小白建站如何选择虚拟空间及服务器,及购买域名的基础知识,这些是硬性要求,你的网站要想运行起来,硬件只是基础,真正的技术是软件,关于PHP软件开发技术,后面我们会慢慢的分享给大家,今天主 ...

  9. Nginx四层负载均衡概述

    目录 Nginx四层负载均衡概述 什么是负载均衡 负载均衡应用场景 四层,七层集群架构 四层负载均衡总结 Nginx如何配置四层负载均衡 nginx四层负载均衡端口转发 Nginx四层负载均衡概述 什 ...

  10. oracle数据库修改密码有效期，解决ORA-28001: 口令已经失效

    工作中oracle数据库安装完成后,需要修改默认的密码有效期,默认为180天,如果不修改,到期忘记更改密码可能会造成不必要的影响. 两种修改方式pl/sql或者cmd窗口 1.pl/sql修改默认密码 ...