vue学习笔记（三）：启动说明

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学习笔记（三）：启动说明

最新文章

热门文章

巴特西

vue学习笔记（三）： 启动说明

最新文章

热门文章

vue学习笔记（三）：启动说明