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

2017-04-21 本文已影响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             ---->模版路径配置的别名，看第三行代码
    }
  ]
})

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