vue项目入手 从搭建到简单页面效果
一. 主旨：
用vue做一个报表的展示前台项目。如图：
image.png
二. 主要功能：
（1）页面资源跳转：首页、hello页。。
（2）图表（柱状图）展示：首页上做一个柱状图的展示。
三. 步入正题：
1. 利用脚手架vuecli进行创建项目。
# 如果已经安装，请省略
$ npm install -g vue-cli
# 初始化一个webpack全功能包的vue项目，请您把my-project换成你自己的项目名。
$ vue init webpack my-project
# 用命令行进入当前项目目录
$ cd my-project
# npm安装所有的依赖的包
$ npm install
# 运行测试的首页
$ npm run dev
init时会交互式提示很多问题，各取所需就好
? Project name mydemovue # => 项目名称
? Project description A Vue.js project # => 项目描述
? Author malun malun666@126.com # => 作者
? Vue build standalone # => 是否支持单文件组件
? Use ESLint to lint your code? Yes # => 是否支持ESLint代码校验
? Pick an ESLint preset Standard # => 校验的标准是什么？
? Setup unit tests with Karma + Mocha? Yes # => 是否使用单元测试
? Setup e2e tests with Nightwatch? Yes # => 是否使用e2e测试
init过程中可能会出现网络问题，有些企业限制网络，导致init webpack失败；
这种情况只要离线执行init，即offline方式就可以了。
具体操作如下：
- 下载模板：
在https://github.com/vuejs-templates/下载webpack-simple 或 webpack。
比如: 到https://github.com/vuejs-templates/webpack-simple点Clone or Download 里的 Download ZIP - 解压zip，放置文件夹
把解压出的文件夹放在C:\Users\Administrator.vue-templates\webpack下，
没有文件夹就新建，新建的时候文件名为：".vue-templates." - 离线执行vue init
vue init webpack project --offline或
vue init webpack-simple project --offline就ok了。
项目代码结构如下：
|--.babelrc #=> babel的配置文件，主要用于转换es6等最新的js语法。
|--.editorconfig #=> 编辑器配置
|--.eslintignore #=> eslint的忽略校验的配置文件
|--.eslintrc.js #=> eslint的配置校验js是否规范的配置文件
|--.gitignore #=> 设置git忽略的管理的文件
|--README.md #=> readme说明文件
|--build/ #=> 自动构建存放的文件地方
|--config/ #=> 当前开发、测试等配置的文件，需要懂点nodejs了啊。
|--index.html #=> 项目的主入口的模板
|--package.json #=> npm的配置文件
|--src/ #=> 源码目录
|--static/ #=> 静态资源存放的目录
|--test/ #=> 测试相关目录
2. 进入项目进行进一步开发，
开发工具我用的是：JetBrains WebStorm。（但我没有注册码，试用一个月就会到期了，如果有朋友有相关的办法的话可以帮一下）
3. 先实现资源菜单及跳转
比如就建两个资源，一个主页一个hello页。可以相互跳转。
- 先分析一下：
(1)两个页面对应的vue (2)路由跳转来控制菜单 - 安装组件
npm i -S vue-router - 写代码
在 /src/components/里创建对应资源的组件如下：
my-vue-project
|-- src
|--|-- Hello.vue
|--|-- Home.vue
内容分别是：
Home：
<template>
<div class="home">
<h3>{{ msg }}</h3>
</div>
</template>
<script>
export default {
name: 'home', // 组件可以有自己的名字。
data () { // 组件的data必须是函数
return {
msg: '这里是Home视图'
}
}
}
</script>
<style scoped>
h3 {
background-color: #82c;
}
</style>
Hello:
<template>
<div>
<h3>{{ msg }}</h3>
</div>
</template>
<script>
export default { // es6的模块导出定义语法，此模块导出默认的对象
name: 'Hello', // 组件可以有自己的名字。
data () { // 组件的data必须是函数
return {
msg: '这里是Hello视图'
}
}
}
</script>
<style scoped>
h3 {
background-color: red;
}
</style>
- 在src下创建approuter.js
import VueRouter from 'vue-router' // 导入路由模块
import Home from './components/Home.vue' // 导入Home组件
import User from './components/Hello.vue'
export default new VueRouter({ // 定义路由规则对象
routes: [
{path: '/home', component: Home},
{path: '/hello', component: Hello}
]
})
- 修改main.js文件
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' // +++1、导入路由组件
import router from './approuter' // +++2、导入我们自己写的路由配置文件
// +++ 3、使用路由组件
Vue.use(VueRouter)
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router: router // +++4、添加路由对象
})
- app.vue 编写加入菜单及url配置
<template>
<div id="app">
<nav class="top-menu">
<ul >
<li v-for="item in menuList">
<router-link :to="item.url">{{ item.name }}</router-link>
</li>
</ul>
</nav>
<hr>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
menuList: [
{ name: '首页', url: '/home' },
{ name: 'Hello页', url: '/hello' },
]
}
}
}
</script>
<style>
#app {
}
.top-menu ul, .top-menu li {
list-style: none;
}
.top-menu {
overflow: hidden;
}
.top-menu li {
float: left;
width: 100px;
}
</style>
浏览网页：http://localhost:8081/#/home，效果如下：
image.png
