美文网首页征服Weex
Vue 2.0 从初始化到编译打包发布

Vue 2.0 从初始化到编译打包发布

作者: 幺加幺 | 来源:发表于2017-04-21 15:13 被阅读1795次

    说明前端 vue 框架不知不觉就这样火起来了,生态圈也是逐渐在完善,后台也是彻底分离了数据给前端,就类似ios 和安卓客户端一样,令人惊奇的是也拥有了前端路由这个概念,更令人兴奋的是用 webpack 打包解决了包和包依赖的问题。二话不说,先上个例子。

    1.vue + webpack 初始化开发环境

    初始化环境首先要全局安装nodejs,webpack环境,至于怎么安装node 环境相信网上有很多教程,webpack 的话可以通过npm安装(也可以通过淘宝镜像配置安装cnpm)。

    安装初始化

    vue init webpack vue-demo
    

    vue-demo 是你要起的项目名字,它会新建一个vue-demo的文件夹来存放初始化的一些文件。下面会提示项目名字,如果不填直接回车,就是默认的名字。

    Paste_Image.png

    项目描述:这里可以填写一些对于这个项目的基本关键描述,例如:饱了么 app

    Paste_Image.png

    项目作者:

    Paste_Image.png

    是否安装vue-router 路由:选择 yes

    Paste_Image.png

    是否开启ESLint 代码检验:
    解析:开启后可能多一个空格或少一个符号都会编译错误
    建议:真正了解后再开启,第一次学的话可以选no,真正项目建议开启

    Paste_Image.png

    是否用karma 测试:no
    建议:了解后再开启,不然配置的第一个坑都爬不过去

    Paste_Image.png

    Nightwatch 测试no


    完成后提示:

    Paste_Image.png

    通俗话解析:
    1.切换到 vue-demo 目录下
    2.通过npm 安装相关的配置
    3.启动项目

    执行安装后

    Paste_Image.png

    运行官方的例子项目

    npm run dev
    

    会自动开启一个端口,自动打开浏览器预览。

    Paste_Image.png

    2.文件结构的一些了解

    导入的一些第三方工具配置,package.json

    Paste_Image.png

    html入口文件文件——> index.html

    Paste_Image.png

    main.js 引入相关模块

    Paste_Image.png

    引入模版文件

    Paste_Image.png

    入口路由 ./router/index.js

    Paste_Image.png

    源码分析:

    import Vue from 'vue'            ---->引入vue模块
    import Router from 'vue-router'    ----->引入路由模块
    import Hello from '@/components/Hello'       ----->引入模版,前面别名,后面路径
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',                 ---->路由访问路径
          name: 'Hello',        ---->名字
          component: Hello             ---->模版路径配置的别名,看第三行代码
        }
      ]
    })
    
    

    首页模版内容,试下修改里面的内容,再访问看是否有什么变化


    Paste_Image.png

    3.vue 路由配置

    1.新建页面模版
    2.导入模版文件
    3.设置访问路由,以及路由对应的页面模板

    新建About.vue 页面模板文件

    Paste_Image.png

    index.js 导入页面模板,设置访问路由

    Paste_Image.png

    启动访问
    访问你刚刚新添加的路由路径


    Paste_Image.png

    这里抛出一个疑问,为什么我的About.vue 里面只有一行About,而显示却多了个V图标呢?

    详情看App.vue 里面的代码,欢迎评论讨论。


    4 源码打包

    激动人心的一刻来临了,通过打包后的文件,通过编译后把build 文件夹和index.html 拷贝到服务器即可。

    Paste_Image.png
    Paste_Image.png

    然后把你的文件拷贝到你的服务器上

    Paste_Image.png Paste_Image.png
    Paste_Image.png

    总结:
    要有一颗不怕折腾的心。

    相关文章

      网友评论

      本文标题:Vue 2.0 从初始化到编译打包发布

      本文链接:https://www.haomeiwen.com/subject/rufdzttx.html