By
被删
更新日期:
最近在使用Vue2作为项目中前端的框架，《Vue2使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录使用Vue框架的脚手架vue-cli初步搭建项目，以及使用vue-router简单搭建路由的过程。
初步使用Vue应用
直接使用Vue源码
这里本骚年就不详细描述了，具体大家可以参考Vue2.0中文文档。
使用脚手架vue-cli搭建
Vue.js提供一个官方命令行工具vue-cli，可用于快速搭建单页应用。
1
2
3
4
| $ npm install -g vue-cli
$ vue init webpack vue2-test
$ cd vue-test
$ npm install
|
安装过程会询问是否需要添加一些相关的依赖（EsLint、mocha、n2n等），但由于本项目较小，也就不安装了。
- 目录组织
生成目录组织如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ├── build/
│ └── ...
├── config/
│ ├── index.js
│ └── ...
├── src/
│ ├── main.js
│ ├── App.vue
│ ├── components/
│ │ └── ...
│ └── assets/
│ └── ...
├── static/
├── test/
│ └── unit/
│ └── e2e/
├── .babelrc
├── .editorconfig.js
├── .eslintrc.js
├── index.html
└── package.json
|
跟vue1.0长得一模一样对吧，哈哈哈。
主要的npm命令
1
2
3
4
| // 启动服务
npm run dev
// 打包生成
npm run build
|
注意，打包生成的文件为绝对定位，需在服务环境下才能打开。如果需要生成相对定位的文件，可以进行如下操作：
1.打开config文件夹下的index.js文件
2.修改build中assetsPublicPath为’./‘（原本为’/‘）
生成的文件将放置在dist文件夹
参考
Vue2.0中文文档
《Vue使用笔记1–使用vue-cli搭建Vue项目》
添加路由
下面我们给项目添加路由。
安装vue-router
1
| npm install vue-router --save
|
引入vue-router
在src/main.js文件中引入vue-router，并创建简单路由，包括：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Login from './Login'
Vue.use(VueRouter)
const routes = [
{ path: '/login', component: Login, name: 'Login' },
{ path: '/app', component: App, name: 'App' },
{ path: '*', redirect: { name: 'Login' } }
]
const router = new VueRouter({
routes
})
new Vue({
router
}).$mount('#app')
|
添加登陆页面
这个项目中我们使用gentelella的开源模板，故我们需要引入一些该模板的相关文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2-test</title>
<link href="./static/gentelella/build/css/custom.css" rel="stylesheet">
<link href="./static/gentelella/build/css/common.css" rel="stylesheet">
</head>
<body class="nav-md">
<div id="app">
<router-view></router-view>
</div>
<script src="./static/gentelella/build/js/common.js"></script>
</body>
</html>
|
- 添加登陆页面Login组件
在src下新建Login.vue文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <template>
<div>
<a class="hiddenanchor" id="signup"></a>
<a class="hiddenanchor" id="signin"></a>
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
<form>
<h1>管理系统</h1>
<div>
<input type="text" class="form-control" placeholder="用户名" v-model="username" required="" />
</div>
<div>
<input type="password" class="form-control" placeholder="密码" v-model="password" required="" />
</div>
<div class="alert alert-danger alert-dismissible fade in" role="alert" v-show="error.shown">
<strong>错误：</strong> {{error.text}}
</div>
<div>
<a class="btn btn-default submit" href="javascript:;" v-on:click="login">登录</a>
</div>
<div class="clearfix"></div>
<div>
<h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
<p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
</div>
</form>
</section>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
username: '',
password: '',
error: {
text: '',
shown: false
}
}
},
methods: {
// 登陆事件
login() {
if (!this.username || !this.password) {
this.error.text = '用户名和密码不能为空'
this.error.shown = true
return;
}
this.$router.push('App')
}
},
// 实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调
created() {
this.error.shown = false
$('body').attr('class', 'login')
},
// 此时元素创建完成
mounted() {
$('input')[0].focus()
}
}
</script>
|
参考
Vue2.0中文文档
结束语
其实使用了这么多的框架，Vue的确是做的很不错的一个呢，从Vue1.x到Vue2.x也是有很多优秀的转变呢。
此处查看项目代码
此处查看页面效果
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢
