By 被删

更新日期:

文章目录
  1. 1. 初步使用Vue应用
    1. 1.1. 直接使用Vue源码
    2. 1.2. 使用脚手架vue-cli搭建
    3. 1.3. 主要的npm命令
    4. 1.4. 参考
  2. 2. 添加路由
    1. 2.1. 安装vue-router
    2. 2.2. 引入vue-router
    3. 2.3. 添加登陆页面
    4. 2.4. 参考
  3. 3. 结束语

最近在使用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/                      # webpack配置参数文件
    │   └── ...
    ├── config/                     
    │   ├── index.js                # 主项目的配置
    │   └── ...
    ├── src/
    │   ├── main.js                 # 应用入口
    │   ├── App.vue                 # 主应用组件
    │   ├── components/             # UI组件
    │   │   └── ...
    │   └── assets/                 # 模块资源（webpack提供）
    │       └── ...
    ├── static/                     # 纯静态资源（打包时直接复制）
    ├── test/
    │   └── unit/                   # 单元测试
    │   └── e2e/                    # e2e tests测试
    ├── .babelrc                    # babel编译参数
    ├── .editorconfig.js            # 编辑器配置
    ├── .eslintrc.js                # eslint配置文件，用以规范团队开发编码规范
    ├── 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，并创建简单路由，包括：

  • Login：登陆页面
  • App：管理页面
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' // 引入vue
import VueRouter from 'vue-router' // 引入vue-router
import App from './App' // 引入App组件
import Login from './Login' // 引入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 // （缩写）相当于 routes: routes
})
new Vue({
    router
}).$mount('#app')

添加登陆页面

这个项目中我们使用gentelella的开源模板，故我们需要引入一些该模板的相关文件。

  • 获取gentelella模板

    • 从github上获取源码
    • 下载后选择需要的文件放置在/static/gentelella/文件夹中
    • lib文件夹放置相关依赖代码文件
    • build文件夹放置自定义的css和js文件

  • index.html中引入相关js和css
    这里我简单列出大概会用到的库和组件。

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>
    <!-- Bootstrap -->
    <!-- Font Awesome -->
    <!-- NProgress -->
    <!-- jQuery custom content scroller -->
    <!-- iCheck -->
    <!-- Select2 -->
    <!-- Switchery -->
    <!-- Datatables -->
    <!-- PNotify -->
    <!-- Custom Theme Style -->
    <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>
    <!-- built files will be auto injected -->
    <!-- jQuery -->
    <!-- Bootstrap -->
    <!-- bootstrap-daterangepicker -->
    <!-- FastClick -->
    <!-- NProgress -->
    <!-- jQuery custom content scroller -->
    <!-- iCheck -->
    <!-- jQuery Tags Input -->
    <!-- Switchery -->
    <!-- Select2 -->
    <!-- Parsley -->
    <!-- Autosize -->
    <!-- NProgress -->
    <!-- bootstrap-progressbar -->
    <!-- Datatables -->
    <!-- PNotify -->
    <!-- Custom Theme Scripts -->
    <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
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难，写文不易，给我家猪囤点猫粮了喵~

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 初步使用Vue应用
    1. 1.1. 直接使用Vue源码
    2. 1.2. 使用脚手架vue-cli搭建
    3. 1.3. 主要的npm命令
    4. 1.4. 参考
  2. 2. 添加路由
    1. 2.1. 安装vue-router
    2. 2.2. 引入vue-router
    3. 2.3. 添加登陆页面
    4. 2.4. 参考
  3. 3. 结束语