vue入門總結(1) 原

關於項目初始化:

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章