vue-cli脚手架使用-- 初学者

第一步:

    安装环境:

   1. npm install webpack -g

   2. npm install vue-cli -g

   3. vue init webpack-simple

   出现

    

 

    4. npm install 

    5. npm install vue-router vue-resource --save

    6. npm run dev 

    出现下图  说明成功

    

 

    写代码正式开始：

         最简单的写法：

         直接在App-vue写如你的代码  如：

         

    2.使用组件写代码：component

        a. 在src目录下先建一个component目录  在目录里面创建一个firstcomponent.js文件 如图

   

        

       

第一步，引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步，注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: { firstcomponent }
}

第三步，使用。
在<template></template>内加上<firstcomponent></firstcomponent>

<template>

    <div id="app">

    <img src="./assets/logo.png"> <h1>{{ msg }}</h1> <firstcomponent></firstcomponent> </div>

</template>

   完整代码：

   

 

 

路由：

  第一种： 在 main.js中路由  不推荐

   在component目录中创建secondconponent 文件

   在App.vue中写如  如图；

     

  在main.js中的代码：