vue-cli腳手架安裝和webpack-simple模板項目生成

1、vue-cli安裝

vue-cli是一個官方vue.js項目腳手架，使用vue-cli能夠快速建立vue項目。

安裝vue-cli前，請確保已安裝nodejs。

// 安裝vue-cli，淘寶鏡像安裝
cnpm install vue-cli -g

若是安裝失敗，能夠使用npm cache clean清理緩存，而後再從新安裝；若是再失敗，還需清理緩存。安裝完成後，能夠使用vue -V查看版本。

cmd 輸入 vue -h，能夠看到能夠使用的命令：

輸入 vue list，能夠看到可用的官方vue模板，第一個和第二個已經不用了，pwa主要是作移動端的：

2、使用webpack-simple模板生成項目（工做中使用webpack模板）

①切換到想把項目生成在這個文件中的目錄；

②初始化項目；

vue init webpack-simple 項目名

注意：若是不會sass，就寫N

③而後就能夠切換路徑到項目，下載依賴包，啓動項目了。

使用webpack模板時：

3、組件的使用

單文件組件放在src下的components文件夾中：

<!-- 一個組件由三部分組成 -->

<!-- 頁面的結構 -->
<template>
    <div id="xx">
    </div>
</template>

<!-- 頁面的業務邏輯 -->
<script> export default { name: 'xx', // 這個name屬性，代指這個組件名字，後期作測試用的，也能夠不寫
 data () { // data必須是一個函數
            return { } } } </script>

<!-- 頁面的樣式 -->
<style scoped>  /* 使用scoped，樣式只會應用在本組件中 */
</style>

<template>
    <header id="header">
        <h3>{{ msg }}</h3>
    </header>
</template>

<script> export default { name: 'header', data () { return { msg: 'Header' } } } </script>

<style scoped> #header { color: cornflowerblue;
    }
</style>

header.vue組件

<template>
    <div id="content">
        <h3>{{ msg }}</h3>
    </div>
</template>

<script> export default { name: 'content', data () { return { msg: 'Content' } } } </script>

<style scoped> #content { color: tan;
    }
</style>

content.vue組件

<template>
    <footer id="footer">
        <h3>{{ msg }}</h3>
    </footer>
</template>

<script> export default { name: 'footer', data () { return { msg: 'Footer' } } } </script>

<style scoped> #footer { color: orangered;
    }
</style>

footer.vue組件

<template>
    <div id="app">
        <h2>{{ msg }}</h2>
        <Xheader></Xheader>
        <Xcontent></Xcontent>
        <Xfooter></Xfooter>
    </div>
</template>

<script>
// 導入子組件
import Xheader from './components/header.vue' import Xcontent from './components/content.vue' import Xfooter from './components/footer.vue' export default { name: 'app', data () { return { msg: '我是App.vue' } }, components: { // 掛載到components，就能夠在template中使用了
 Xheader, // 至關於 Xheader: Xheader
 Xcontent, Xfooter, }, } </script>

<style scoped> #app { background-color: grey; width: 200px; text-align: center;

    } h2 { color: salmon;
    }
</style>

App.vue

讓項目運行起來，能夠看到：

就像官網說的：一般一個應用會以一棵嵌套的組件樹的形式來組織。