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

让项目运行起来，能够看到：

就像官网说的：一般一个应用会以一棵嵌套的组件树的形式来组织。