Libx

初探Vue

Word count: 1,408Reading time: 6 min
2017/08/11 Share

暑假在学校留校做项目,一个月,学了很多东西,但是因为项目比较赶,所以一直也没有腾出时间类写几篇博客,现在项目已经完工了 ,就多写几篇博客来总结一下。

留校总结<一> ——初探vue

由于工作室前端的技术栈主要是使用Vue,所以这个暑假就强行上车,开始Vue 之旅了,前面基本上都是在看文档,跟着文档把demo敲一遍,之后便是看一些其他人写的一些关于Vue的博客,(github有很多使用Vue搭建的web app,比如网易云音乐,QQ音乐什么的,看的时候主要是看一下别人的项目结构,学习使用Vue构建组件化完整web应用的的处理方式)这里有一篇鲜果前端团队的《使用Vue搭建简书》,对使用的技术栈其实就是Vue全家桶,也做了非常详细的介绍,值得一看。

Vue最初是由国人尤雨溪所写,之后由整个团队开发,这里不再背书。对国人非常友好的一点是:Vue的中文文档非常的好,更新非常快,翻译的也非常好(原文档是英文的,中文文档也是由社区翻译),借助文档便可很快的上车。

Vue是一个非常轻量的前端MVVM框架,或者正如尤大所说的那样是一个渐进式框架。在使用是甚至可以像引入JQuery一样引入一个CDN即可使用,但是在构建大型应用时当然还是要使用我们的老伙伴npm来安装一波:npm install vue。

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用(当然如果你够强也可以自己配置一波)。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

  • 安装vue-clinpm install -g vue-cli
  • 创建webpack项目,并进入项目vue init webpack projectname``cd projectname
  • 安装依赖npm install
  • 安装vue-routernpm install vue-router --save-dev
  • 安装vuexnpm install vuex --save-dev
  • 运行npm run dev

这一步流程下来就能在本地服务器跑起来了,vue的初始页面了:

(补充,Vue并非只提供了一种webpack模板,除了webpack模板还有webpack-simple模板)

文档结构:

webpack-simple模板的项目结构:

├─.gitignore
├─index.html
#主页
├─package.json
#项目配置文件
├─README.md
├─webpack.config.js
#webpack配置文件
├─dist
#发布目录
│ ├─.gitkeep
├─src
#开发目录
│ ├─App.vue
#App.vue组件
│ ├─main.js
#预编译入口

webpack-simple模板的项目结构

├── build/                      # webpack config files
│ └── …
├── config/
│ ├── index.js # main project config
│ └── …
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── …
│ └── assets/ # module assets (processed by webpack)
│ └── …
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig.js # editor config
├── .eslintrc.js # eslint config
├── index.html # index.html template
└── package.json # build scripts and dependencies

通过比较可以很显然的看出,webpack-simple确实simple。如果想要构建比较小型的单页使用他快速构建。但是如果要进行比较大型的webapp,自然webpack是更适合作为大型项目来使用的。

一般来说,在使用的过程中,如果不是高阶玩家,并且你的项目已经在本地跑了起来,并不需要用户进行过多的配置。主要的几个工作点就是在src目录下了。主要便是components下的各个组件的编写,入口main.js编写,路由的编写。醒目结构中已经有相应的标注。

怎样跑起来的?

(请确定你已经搞懂了项目结构)

main.js作为应用程序脚本文件的主入口,在main.js中引入vue,vue-router,vuex等,并对vue-router进行配置。

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../vuex/store'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(VueRouter);

import App from './App.vue';
import index from './components/index.vue';
import info from './components/info.vue';

const routes = [

    {
        path: '/',
        components: {
            default: App,
            b: sidebar
        }
    },
    {
        path: '/index',
        name: 'todo',
        component: index,
        children: [{
            path: '/info/:id',
            component: info
        }]
    }
]
//创建 router 实例,然后传 routes 配置
const router = new VueRouter({
    routes
});
//创建和挂载根实例。通过 router 配置参数注入路由,整个应用都有路由功能
new Vue({
    el: "#app",
    store,
    router,
    components: {
        test: info
    }
});

这是一个非常简单的main.js中的内容,首先我们要引入vue以及所要使用的vue-router,resourse等,并声明:use(*)。

之后需要引入项目中所编写的的模板,路由可在本文件中编写,若在大型应用中单独放到一个文件中然后引入也是非常好的选择。

之后便开始创建和挂载根实例。

应用已经联通了。

下面来看一个简单的vue实例:

<div id=“app”>

</div>




var app = new Vue({

el: ‘#app’,

data: {

message: ‘Hello Vue!’

}

})




这便是一个最简单的vue实例了,个人认为:在Vue中相对重要的便是:

1 路由的配置以及恰当的使用 (vue-router)

2 Vue核心数据驱动的思想,避免直接操作DOM

3 组件之间数据的传递,状态的管理 (vuex)

4 组件生命周期的理解(非常重要,会单独总结)

暂时就想到这几点,这几点之后会分开总结
先写到这里。

CATALOG
  1. 1. 留校总结<一> ——初探vue
    1. 1.1. 文档结构:
    2. 1.2. 怎样跑起来的?