vue--frame-init

vue install & usage

cnpm install webpack -g
cnpm install webpack --save-dev

webpack介绍

cnpm install vue-cli -g
cnpm install vue-cli --save-dev

vue-cli介绍

vue project create

#根据Webpack模板，创建正式项目
vue init webpack vue 
#这里需要进行一些配置，默认回车即可
    This will install Vue 2.x version of the template.
    
    For Vue 1.x use: vue init webpack#1.0 my-project
    
    ? Project name my-project
    ? Project description A Vue.js project
    ? Author runoob <test@runoob.com>
    ? Vue build standalone
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Setup unit tests with Karma + Mocha? Yes
    ? Setup e2e tests with Nightwatch? Yes
    
       vue-cli · Generated "vue".
    
       To get started:
       
         cd my-project
         npm install
         npm run dev
         
#安装项目依赖
cnpm install
cnpm install --save-dev

#安装vue路由vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource --save-dev

#安装对于读取css配置
cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

#运行环境

![Uploading 屏幕快照 2017-01-19 下午8.29.38_002450.png . . .]



#在src目录下，新建一个componenet文件夹,再建一个first.vue文件，内容如下：  
<template>
  <div id="first">
    <h1>I am a title.</h1>
    <a href="https://github.com/canbing007"> written by {{ author }} </a>
  </div>
</template>
 
<script type="text/javascript">
export default {
  data () {
    return {
      author: "Bing"
    }
  }
}
</script>
 
<style>
</style>

#然后在App.vue中引用，代码如下：
<template>
  <div id="app">
    ![](./assets/logo.png)
    <h1>{{ msg }}</h1>
    <first></first>

    <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://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</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>
import first from './component/first.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{ first }
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

如下截图：

屏幕快照 2017-01-19 下午8.29.38.png