關於項目初始化:
1.先把vue-cli腳手架工具在系統下全局安裝:npm install vue-cli -g
2.安裝好腳手架工具之後就可以開始建立工程項目了:vue init webpack-simple vue-demo(這個是你的項目名)
3. 進入項目的目錄安裝腳手架項目的基本支持包(package-json裏面的包)npm install
4.npm run dev 運行這個項目
項目工程建立完成後:
main.js Vue實例啓動入口
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render:h=>h(app);
})
通過import將一個Vue.js的組件文件引入,並創建一個Vue對象的實例,在vue實例中用render方法來繪製這個vue組件(app)就完成了初始化。然後,將vue實例綁定到一個頁面上,真實存在的元素App Vue程序就引導成功了。
一個Vue實例必須與一個頁面元素(index.html的id爲app)綁定。Vue實例一般用作Vue的全局配置來使用,例如像安裝路由、資源插件,配置應用於全局的自定義過濾器、自定義指令等。
App.vue:
.vue是vus.js特有的文件格式,表示的是一個vue組件,.vue文件可以同時承載“視圖模板”、“樣式定義”和組件代碼。.vue文件內部結構
<template>
<div id="app"></div>
</template>
<style></style>
<script>
export default {
name:'app'
}
</script>