Vue入门:Vue.js 2.x 实例搭建

文章目录:
一、技术准备
二、开发工具
三、使用 vue-cli 快速开始模板项目
四、给项目添加组件
五、使用vue-router添加路由功能
六、使用axios请求数据
七、引入第三方UI库
八、更多的Vue

Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式。本文通过一个简单的实例开始上手Vue.js开发。

一、技术准备

使用传统mvc项目的开发人员,笔者建议在开始项目前,对以下两个技术点进行了解。

1、 Vue.js基础知识 Vue.js特点就是入门简单,api 简洁一致,文档清晰。对于了解Html,CSS,JavaScript花几个小时看一遍,就能掌握基础的东西。 可参考http://www.runoob.com/vue2/vue-tutorial.html

2、 ES6的模块化加载 有ES6中,可以不使用SeaJS或者RequireJS,而直接使用import和export在浏览器中导入和导出各个模块了, 具体使用参考http://www.cnblogs.com/diligenceday/p/5503777.html

二、开发工具

工欲善其事必先利其器,开发Vue项目建议使用“属于21世纪”的代码编辑器——sublime,它提供了代码智能提示,智能补全等功能。总之就是更加智能和便捷,大大提升了开发效率。个人觉得Webstorm相对更加智能一点,但感觉并不简洁,我的电脑运行Webstorm就有卡顿现象,但是Sublime相对轻巧灵活,界面清爽,功能也一应俱全。具体的功能比较多,你可以自己亲自使用试试,下载地址是:http://www.sublimetext.com/

三、使用 vue-cli 快速开始模板项目

vue-cli:Vue的脚手架,用于自动生成Vue.js项目相关文件。

1、安装 vue 脚手架
cnpm install vue-cli -g
2、使用 vue-cli 初始化项目
cd 目录路径
vue init webpack-simple first-vue /  vue init webpack vue-demo
  • Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
  • Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
  • Author:作者,如果你有配置git的作者,他会读取。
  • Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
  • Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
  • setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
  • Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。

文件树结构如下:

├─src                  // 开发目录
│ ├─assets             // 资源文件目录,需要打包的放到该目录下
│ │ ├─logo.png │
│ ├─App.vue            // App.vue组件
│ ├─main.js          // 预编译入口
├─.babelrc           // babel配置文件
├─.gitignore
├─index.html         // 主页
├─package.json       // 项目配置文件
├─README.md
├─webpack.config.js   // webpack配置文件</pre>
3、安装项目依赖

进入项目目录后使用npm或者cnpm(淘宝镜像)、yarn

cd first-vue
npm install 或 cnpm install
4、启动项目

由于vue.js不支持ie8,建议默认浏览器使用chrome,自动启动浏览器就会看到这个界面了。

安装成功
5、发布项目

执行以下命令会生成发布时的build.js,并且是经过压缩的。

npm run build

这时候会在目录下生成dist文件夹和相关发布后的文件,由于使用的是webpack-simple方式打包,不会生成index.html文件,特别要注意的是index.html 加上 dist 不能采用 file 协议打开,必须使用 http 协议打开,并且需要放在 http 服务的 / 目录下。拷贝index.html到dist文件文件夹并放在本地IIS目录下,这样就能访问了。(关于webpack的详细使用,建议学习专门的教程,打包的配置文件在webpack.conifg.js里面,这里暂时只要知道这样用就行了)

四、给项目添加组件

1、通过前面的步骤,已经在本地跑起了一个简单的项目,但这个项目还太简单了,现在给它加点新的功能。
2、组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树,例如常用的顶部条,底部菜单都就抽象成组件使用。

1、添加文件。

在src目录下新建components目录,添加first-component.vue,template 写 html,script写 js,style写样式

<template>
  <div id="firstcomponent">
    <h1>标题</h1>
    <a> 作者:{{ author }} </a>
  </div>
</template>
 
<script type="text/javascript">
  export default {
    data () {
      return {
        author: "ling"
      }
    }
  }
</script>

<style>
</style>
2、引入。

打开App.vue,引入firstcomponent组件,并删除vue-cli脚手架生成的一些无意义html。在<script></script>标签内的第一行写

import firstcomponent from './components/firstcomponent.vue'
3、注册。

在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: { firstcomponent }
}

4、使用。

在<template></template>内加上<firstcomponent></firstcomponent>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h2>{{msg}}</h2>
    <firstcomponent></firstcomponent>
  </div>
</template>

完成后的代码:

在浏览器上打开 http://localhost:8080/ 页面(之前打开过就会自动刷新),这样就成功在项目中添加了一个组件。

五、使用vue-router添加路由功能

实际项目中,由于不同模块的划分,需要路由功能,使用vue-router为项目添加路由。注意: vue-router@2.x 只适用于 Vue 2.x 版本。

1、终端安装 vue-router。
cnpm install vue-router --save

注意参数--save
  --save 可以理解成生产环境,会把依赖包名称添加到 package.json 文件 dependencies 键下,dependencies是运行时依赖。
  --save-dev 则是开发环境, 添加到 package.json 文件 devDependencies 键下,devDependencies是开发时的依赖,如生产时不需要用到压缩库应该安装到devDependencies 。

2、src下添加views目录和页面文件。

在目录下面新建两个文件,view1.vue和view2.vue。

<template>
    <div >
        <h1>我是View1</h1>
        <a> 我是View1 </a>
    </div>
</template>
 
<script type="text/javascript">
    export default {
        name: 'view1',
    }
</script>
 
<style>
</style>  
<template>
    <div >
        <h1>我是View2</h1>
        <a> 我是View2</a>
    </div>
</template>
 
<script type="text/javascript">
    export default {
        name: 'view2',
    }
</script>
 
<style>
</style> 
3、引入并注册 vue-router.

添加router.js文件,这里添加了两个路由,分别指向view1和view2。

import Vue from 'vue'
import Router from 'vue-router'
import View1 from './views/view1.vue'
import View2 from './views/view2.vue'

Vue.use(Router)
 
export default new Router({
    linkActiveClass: 'active',
    // 路由配置
    routes: [
    {
        path: '/view1',
        component: View1
    }, {
        path: '/view2',
        component: View2
    }, {
        path: '/*',
        component: View1
    }
    ]
})

至此,目录结构如下:

4、使用router。

修改main.js,引入 router并指定当前vue实例。

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
 
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})
5、添加路由链接和出口。

修改App.vue,添加链接和出口。

<router-link to="/view1">Go to view1</router-link>
<router-link to="/view2">Go to view2</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

查看网站,点击Go to view1和Go to view2,浏览器地址发生了改变,同时view1和view2的内容也渲染在了router-view。

六、使用axios请求数据。

至此,我们的项目实现了路由功能,但这些页面的数据都是静态的,下面我们使用axios库来请求动态数据并展示出来。vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios。

1、终端安装axios。
cnpm install axios --save
2、引入axios。

修改main.js文件,添加 Vue.prototype.$ajax = axios ,引入axios。

import Vue from 'vue'
import axios from 'axios'
import App from './App.vue'
import router from './router.js'
 
Vue.prototype.$ajax = axios
 
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})
3、在视图中请求数据。

修改view1.vue的js,引入axios,请求服务器数据。

<script type="text/javascript">
import axios from 'axios'
 
export default {
    name: 'view1',
    mounted: function() {
        axios.post('请求接口')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (response) {
                console.log(response);
            });
    }
}
</script> 

axios不支持跨域的jsonp请求

七、引入第三方UI库。

本文引用的是Element,Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。官网: http://element.eleme.io/#/en-US,github:https://github.com/ElemeFE/element

1、终端安装Element-ui
cnpm install element-ui --save
2、引入Element。

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。

3、修改webpack.config.js。

按照element-ui官网提供的方法在vue中引入element2.0 后报错如下:

错误提示说element-icons引用出错,找不到合适的loader,这是因为file-loader默认处理文件格式是不包含'.tff'和'.woff'的; 于是在webpack.config.js中将目录中的文件格式加上:

然后重新运行,这样就能正确加载了;

八、更多的Vue。

至此,我们已经搭建了Vue.js开发环境并使用发布了一个功能简单但逻辑完整项目,一些不太复杂的项目基本可以按步骤来实现。推荐一些优秀的vue.js库来构建更复杂的工程。

Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vue-lazyload:vue-lazyload 一个简单易用的 Vue 图片延迟加载插件 。

更多实用的vue.js库: http://www.cnblogs.com/huyong/p/6517949.html

原文参考:
https://www.cnblogs.com/dreling/p/6892684.html
https://www.zhihu.com/question/37984203
http://www.runoob.com/w3cnote/vue2-start-coding.html
https://www.zhihu.com/question/38213423
https://www.v2ex.com/t/249859


更多精彩请关注:Vue专题