文章目录
脚手架安装(vue-cli)
1、安装 Node.js 淘宝镜像加速器（cnpm）
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org
2、安装 vue-cli
cnpm install vue-cli -g
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list
使用脚手架初始化项目
1、初始化项目
vue init webpack vue-demo1
1.1 相关操作 说明
- Project name：项目名称，默认 回车 即可
- Project description：项目描述，默认 回车 即可
- Author：项目作者，默认 回车 即可
- Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
- Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
- Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
- Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
- Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行
1.2 手动添加所需的依赖库和安装依赖
npm install vue-router --save-dev
npm install
1.3 启动项目
以下2种方式 启动项目
npm start
npm run dev
2、项目结构
2.1 项目结构概览
2.2 项目结构说明
- build 和 config：WebPack 配置文件
- node_modules：用于存放 npm install 安装的依赖文件
- src： 项目源码目录
- static：静态资源文件
- .babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
- .editorconfig：编辑器配置
- eslintignore：需要忽略的语法检查配置文件
- .gitignore：git 忽略的配置文件
- .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
- index.html：首页，仅作为模板页，实际开发时不使用
- package.json：项目的配置文件
- name：项目名称
- version：项目版本
- description：项目描述
- author：项目作者
- scripts：封装常用命令
- dependencies：生产环境依赖
- devDependencies：开发环境依赖
案例演示
1、静态页面
2、拆分组件
案例代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./static/css/bootstrap.css">
<title>vue-demo1</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
入口js : main.js
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
根Vue: App.vue
<!-- 定义模板 -->
<template>
<div>
<Header/>
<div class="container">
<Add :addComments="addComments"/>
<List :comments="comments"/>
</div>
</div>
</template>
<!-- 定义行为 -->
<script>
import Header from './components/Header'
import Add from './components/Add'
import List from './components/List'
export default {
name: "App",
components: {
Header,
Add,
List
},
data () {
return {
comments: [
{
name: 'Jack',
content: '我的第一个评论消息'
},
{
name: 'Lucy',
content: 'Lucy我的第一个评论消息'
}
]
}
},
methods: {
addComments (comment) {
this.comments.unshift(comment)
}
}
}
</script>
<!-- 定义样式 -->
<style>
</style>
根据静态页面所需拆分出的Component
1、Header.vue 头部组件
<template>
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>请发表对Vue的评论</h1>
</div>
</div>
</div>
</header>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
</style>
2、Add.vue 添加评论组件
<template>
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" placeholder="用户名" v-model="name">
</div>
<div class="form-group">
<label>评论内容</label>
<textarea class="form-control" rows="6" placeholder="评论内容" v-model="content" @keypress="add()"></textarea>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default pull-right" @click="add()">提交</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: "Add",
props: {
addComments: {
type: Function,
required: true
}
},
data () {
return {
name: '',
content: ''
}
},
methods: {
add () {
if (this.name === '' || this.content === '') {
alert('您输入的内容为空')
return ;
}
const comment = {
name: this.name,
content: this.content
}
this.addComments(comment);
}
}
}
</script>
<style scoped>
</style>
3、Comments.Vue 评论内容组件
<template>
<div class="col-md-8">
<h3 class="reply">评论回复：</h3>
<h2 v-if="isShow">暂无评论，点击左侧添加评论！！！</h2>
<ul class="list-group" v-else>
<Item
v-for="(comment,index) in comments" :key="index"
:comment="comment"
:delComment="delComment"
:index="index"/>
</ul>
</div>
</template>
<script>
import Item from './Item'
export default {
name: "List",
props: {
comments: Array
},
components: {
Item
},
computed: {
isShow () {
return this.comments.length === 0 ? true:false
}
},
methods: {
delComment (index) {
this.comments.splice(index,1)
},
}
}
</script>
<style scoped>
.reply {
margin-top: 0px;
}
</style>
4、Item.Vue 评论内容项组件
<template>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;" @click="remove(index)">删除</a>
</div>
<p class="user"><span >{{comment.name}}</span><span>说:</span></p>
<p class="centence">{{comment.content}}</p>
</li>
</template>
<script>
export default {
name: "Item",
props: {
comment: Object,
delComment: Function,
index: Number
},
methods: {
remove(index) {
this.delComment(index);
}
}
}
</script>
<style scoped>
li {
transition: .5s;
overflow: hidden;
}
.handle {
width: 40px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
right: 10px;
top: 1px;
text-align: center;
}
.handle a {
display: block;
text-decoration: none;
}
.list-group-item .centence {
padding: 0px 50px;
}
.user {
font-size: 22px;
}
</style>