Vue模块化开发
在Vue中封装了很多的模块供开发使用,因此使用vue开发单页项目是一件很愉快的事情,学习过js或者Vue就可以知道很多的重复功能都可以做成组件来供重复使用。条件:需要在安装有node的环境下(如果速度较慢npm install cnpm -g --registry=https://registry.npm.taobao.org)cnpm install -g vue-cli--安装v...
·
在Vue中封装了很多的模块供开发使用,因此使用vue开发单页项目是一件很愉快的事情,学习过js或者Vue就可以知道很多的重复功能都可以做成组件来供重复使用。
条件:需要在安装有node的环境下(如果速度较慢npm install cnpm -g --registry=https://registry.npm.taobao.org)
- cnpm install -g vue-cli --安装vue脚手架
- vue init webpackt --在项目目录初始化webpackt
- npm run dev
- 访问http://localhost:8080/
使用Vue脚手架搭建的项目目录
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹,一般放一些静态资源文件
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹
├── index.html # index.html 入口模板文件
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的,可参照github上star多的项目。
build/
因此主要的工作区域就在src
首先先来了解一下什么是组件,组件的构建要素是什么
比如App.vue就是一个标准的组件,也就是上图的主页,由三部分构成
// 第一部分
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
// 第二部分
<script>
export default {
name: 'App'
}
</script>
// 第三部分
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
接下来就来自己编写组件来深入体会组件的意义
首先现在components目录下编写一个Hello.vue
<template>
<div>
<h1>hello {{name}}</h1>
<router-view />
</div>
</template>
<script>
export default {
data () {
return {
name: 'zhangsan'
}
}
}
</script>
<style>
</style>
然后在index.js中导入这个组件并配置路由信息
import Vue from 'vue'
import Router from 'vue-router'
// @就是src的根目录
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hello',
name: 'Hello',
component: Hello
}
]
})
访问http://localhost:8080/#/hello
去掉hello还是原来的页面,也就是HelloWorld
配置路由后就可以使用路由组件进行路由功能,如下代码可以添加一个路由链接
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<!-- 添加一个路由链接 -->
<router-link to="/hello">去Hello</router-link>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
点击过去就到了Hello组件
这就是模块化的优点,也就是单页程序能简单实现的保证。
更多推荐
已为社区贡献1条内容
所有评论(0)