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

说明前端 vue 框架不知不觉就这样火起来了，生态圈也是逐渐在完善，后台也是彻底分离了数据给前端，就类似ios 和安卓客户端一样，令人惊奇的是也拥有了前端路由这个概念，更令人兴奋的是用 webpack 打包解决了包和包依赖的问题。二话不说，先上个例子。 ###1.vue + webpack 初始化开发环境 初始化环境首先要全局安装nodejs，webpack环境，至于怎么安装node 环境相信网上有很多教程，webpack 的话可以通过npm安装（也可以通过淘宝镜像配置安装cnpm）。

安装初始化

vue init webpack vue-demo
复制代码

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

---

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

---

项目作者：

---

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

---

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

---

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

---

Nightwatch 测试no

---

完成后提示：

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

执行安装后

运行官方的例子项目

npm run dev
复制代码

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

---

##2.文件结构的一些了解 导入的一些第三方工具配置，package.json

---

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

---

main.js 引入相关模块

---

引入模版文件

---

入口路由 ./router/index.js

源码分析：

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             ---->模版路径配置的别名，看第三行代码
    }
  ]
})

复制代码

---

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

---

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

新建About.vue 页面模板文件

---

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

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

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

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

---

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

---

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

---

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

转载于:https://juejin.im/post/5a3217c7f265da433562c71d