Vue第一個簡單的例子

 一、基本環境配置

1、安裝NodeJS

　　https://nodejs.org/en/download/

2、設置淘寶鏡像：大家都知道國內直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。

npm install -g cnpm --registry=https://registry.npm.taobao.org （安裝淘寶鏡像）

3、安裝webpack

　　cnpm install webpack -g

4、安裝vue腳手架

　　npm install vue-cli -g

5、新建一個文件夾，在該文件下打開命令行，執行以下命令，創建項目

　　vue init webpack projectName

 

二、新建一個項目

 

三、對新建的項目文件進行修改

1、首先在components目錄下添加HelloVue.vue文件

<template>
  <div id="vue">Hello Vue {{message}}</div>
</template>

<script>
export default { //這里需要將模塊引出，可在其他地方使用
  name: 'HelloVue',
  data () {
    return {
      message: 'xxx'
    }
  }
}
</script>

<style>
  #vue {
    color: green;
    font-size: 28px;
  }
</style>

　　

2、在HelloWorld.vue內容中添加

    <h1>
      <router-link to="day01">HelloVue</router-link>
    </h1>

　　

3、在index.js文件進行相應的修改

 

4、運行結果