vue.js工具篇——vue-cli脚手架

vue.js工具篇——vue-cli脚手架

Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

一、vue-cli安装、创建、运行

1. 全局安装 vue-cli（$ npm install –global vue-cli）
2. 创建一个基于webpack模板的新项目（$ vue init webpack 项目名称）
3. 安装依赖,进入项目目录 （$ cd 项目名称）
4. 运行项目（$ npm run dev）

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果是新手，强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。

二、vue-cli项目结构

• src下的assets文件夹主要是用来放图片的。
• src下的components文件夹主要是用来放组件的。

三、vue-cli项目初体验，实现以下的一个简单结构

【1】首先在 src下的components文件夹中新建Banner.vue文件夹

<template>
    <div class="top">
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
      name: 'banner',
      data () {
        return {
          msg: '头部区域'
        }
      }
    }
</script>


<style>
    .top{
      width:800px;
      height:100px;
      background:skyblue;
      margin:0 auto;
    }
    h1{
      text-align:center;
      line-height:100px;
      color:#fff;
    }
</style>

【2】第二步，在src文件下的App.vue文件中用import引入Banner组件，并注册一下，然后引用

<template>
    <div id="app">
      <Banner/>
    </div>
</template>

<script>
    import Banner from './components/Banner';

    export default {
      name: 'App',
      components: {
        Banner 
      }
    }
</script>

<style>
    *{
       margin:0px;
       padding:0px;
    }
    .content{
       width:800px;
       margin:0 auto;
    }
</style>

【3】第三步，左边区域和右边区域实现同头部区域

四、将element-ui中的组件添加到项目中（http://element.eleme.io/#/zh-CN）

【1】将element-ui安装到项目中（npm i element-ui -S）

【2】定义头部轮播图组件和左边树形结构组件、右边卡片组件

【3】然后将轮播图组件、树形结构组件、卡片组件分别引入到头部、左边和右边组建中

【4】在main.js文件中添加如下语句即可运行

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App';

Vue.use(ElementUI);

代码示例：
App.vue文件

<template>
    <div id="app">
      <Banner/>
      <div class="content">
          <Left/>
          <Right/>
      </div>
    </div>
</template>

<script>
    import Banner from './components/Banner';
    import Left from './components/Left';
    import Right from './components/Right';

    export default {
      name: 'App',
      components: {
        Banner,
        Left,
        Right
      }
    }
</script>

<style>
    *{
       margin:0px;
       padding:0px;
    }
    .content{
       width:800px;
       margin:0 auto;
    }
</style>

Banner.vue文件

<template>
    <div class="top">
        <Carousel/>
    </div>
</template>

<script>
    import Carousel from './Carousel';

    export default {
      name: 'banner',
      data () {
        return {
          msg: '头部区域'
        }
      },
      components:{
        Carousel
      }
    }
</script>


<style>
    .top{
      width:800px;
      min-height:100px;
      background:skyblue;
      margin:0 auto;
    }
</style>

Carousel.vue文件

<template>
    <div class="block">
      <el-carousel height="250px">
        <el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
    export default {
      name: 'carousel',
      data () {
        return {
          msg: '轮播图区域'
        }
      }
    }
</script>


<style>
    .el-carousel__item:nth-child(2n) {
       background-color:#99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
       background-color:#d3dce6;
    }
</style>

main.js文件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App';

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})