zoukankan      html  css  js  c++  java

  • 前端架构之路：使用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世纪”的代码编辑器——Atom，它开源免费而且是跨平台的，基于 WEB 技术（Chromium+Node.js）开发的，简单理解的话编辑器本身其实是一个跑在本地的网页，用户可以用Javascript来编写编辑器插件，缺点就是基于WEB导致性能不是很理想，但这不影响笔者对它的爱，Atom好用，而且有大量的高亮提示，语法插件可使用 ，当然你也可以通过安装插件使用宇宙第一IDE-VisualStudio进行开发。使用Atom建议安装以下插件。
    　　1、minimap 让你了解当前屏幕所处相对位置，如下图App.Vue文件右侧所示
     　 
    　　2、git plus git管理插件
     
    　　3、anguage-vue 在Atom中为Vue组件文件添加语法高亮和片段。

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

    　　vue-cli：Vue.js脚手架，用于自动生成Vue.js项目相关文件，类似Visual Studio的MVC的模板项目。
    　　1、安装vue脚手架
    　　 
    cnpm install vue-cli -g
     
    　　2、使用vue-cli初始化项目
    　　在硬盘新建工程文件夹，在终端中使用cd命令进入该目录
     
    cd 目录路径
vue init webpack-simple first-vue
    　　使用webpack打包项目，输入项目名称、描述、作者、是否使用sass后即在目录下面生成了项目。
    　　文件树结构如下：
    复制代码
    ├─src // 开发目录
│ ├─assets // 资源文件目录，需要打包的放到该目录下
│ │ ├─logo.png │
│ ├─App.vue　　 // App.vue组件
│ ├─main.js 　　// 预编译入口
├─.babelrc 　　// babel配置文件
├─.gitignore
├─index.html 　　// 主页
├─package.json 　　// 项目配置文件
├─README.md
├─webpack.config.js // webpack配置文件
    复制代码
    　　3、安装项目依赖
    　　进入项目目录后使用npm或者cnpm(淘宝镜像 ）安装。
    cd first-vue
npm install
    　　4、启动项目
    　　由于vue.js不支持ie8，建议默认浏览器使用chrome，自动启动浏览器就会看到这个界面了。
    npm run dev
     
    　　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里面，这里暂时只要知道这样用就行了）
     
     

    　四、给项目添加组件

    　　通过前面的步骤，已经在本地跑起了一个简单的项目，但这个项目还太简单了，现在给它加点新的功能。
    　　组件系统是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('/jhb/getslides')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (response) {
                console.log(response);
            });
    }
}
</script>
    复制代码
    　　由于axios不支持跨域的jsonp请求，这里笔者使用本地webapi项目的接口数据进行测试，发布后拷贝到iis目录中，如图可以看到成功请求到了数据。

    　七、更多的Vue.js

    　　至此，我们已经搭建了Vue.js开发环境并使用发布了一个功能简单但罗完整项目，一些不太复杂的项目基本可以按步骤来实现。推荐一些优秀的vue.js库来构建更复杂的工程。
    　　Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
    　　vue-lazyload：vue-lazyload 一个简单易用的 Vue 图片延迟加载插件 。
    　　Element：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。官网： http://element.eleme.io/#/en-US，github：https://github.com/ElemeFE/element。
    　　更多实用的vue.js库： http://www.cnblogs.com/huyong/p/6517949.html。
     
    　　本文代码已上传至github：https://github.com/dreling8/vuejs-demo
     
                  https://www.v2ex.com/t/249859
    作者：徐领
    本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如果本文对您有用，请不吝点上一个赞，谢谢。
  • 相关阅读:
    Node.js meitulu图片批量下载爬虫1.04版
    Node.js meitulu图片批量下载爬虫1.03版
    Node.js meitulu图片批量下载爬虫1.02版
    Node.js 解析gzip网页（https）
    Node.js 访问https网站
    Node.js meitulu图片批量下载爬虫1.01版
    我曾经七次鄙视自己的灵魂 卡里.纪伯伦
    ZT:有些人，活了一辈子，其实不过是认真过了一天，其余时间都在重复这一天而已
    节点对象图与DOM树形图
    DOM（文档对象模型）基础加强
  • 原文地址：https://www.cnblogs.com/beimingbingpo/p/9299527.html
Copyright © 2011-2022 走看看