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

#根據(jù)Webpack模板，創(chuàng)建正式項(xiàng)目
vue init webpack vue 
#這里需要進(jìn)行一些配置，默認(rèn)回車即可
    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
         
#安裝項(xiàng)目依賴
cnpm install
cnpm install --save-dev

#安裝vue路由vue-router和網(wǎng)絡(luò)請求模塊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

#運(yùn)行環(huán)境

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



#在src目錄下，新建一個componenet文件夾,再建一個first.vue文件，內(nèi)容如下：  
<template>
  <div id="first">
    <h1>I am a title.</h1>
    <a > 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  target="_blank">Core Docs</a></li>
      <li><a  target="_blank">Forum</a></li>
      <li><a  target="_blank">Gitter Chat</a></li>
      <li><a  target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a  target="_blank">vue-router</a></li>
      <li><a  target="_blank">vuex</a></li>
      <li><a  target="_blank">vue-loader</a></li>
      <li><a  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