vue.js工具篇——vue-cli脚手架
Vue 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
一、vue-cli安装、创建、运行
- 全局安装 vue-cli($ npm install –global vue-cli)
- 创建一个基于webpack模板的新项目($ vue init webpack 项目名称)
- 安装依赖,进入项目目录 ($ cd 项目名称)
- 运行项目($ 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/>'
})