VUE起步构建简单单页应用

环境搭建工作：

1.先安装node，git工具（便于命令行操作）

2.换源（npm淘宝镜像网站:https://npm.taobao.org/）
  命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装VUE（命令：cnpm  install -g vue-cli）
4.安装WebPack（命令：cnpm install webpack -g ）

5.通过vue cli脚手架初始化一个自己的vue项目（命令：vue init webpack projectName）

6.cd projectName(执行cnpm install)
7.cnpm run dev(会自动打开浏览器看到Hello界面)

8.VUE编写完成的项目使用webpack打包(命令：cnpm run build),文件生成在dist文件夹下面

打包完之后生成的文件,使用默认的vue cli打包的是单页的项目（只有一个入口文件），随便丢在服务器下面都可以进行访问（eg：nginx，apache，tomcat：localhost/index.html）

我们进行简单的扩展一下这个项目，项目的目录图：

在components文件夹下面新增2个模块First.vue

Two.vue

定义路由文件(在router文件夹下面)：

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from 'components/Hello'
import First from 'components/First'
import Two from 'components/Two'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },
    {
      path: '/first',
      component: First
    },
    {
      path: '/two',
      component: Two
    }
  ]
})

App.vue

然后执行命令:cnpm run dev

注意浏览器里面的路由http://localhost:8080/#/first,http://localhost:8080/#/two，只要你看到的网站路由类似这样的基本上都是目前流行的前端JS框架写出来的。

注：这种流行的前端框架写代码必须在nodejs环境下面去写，否则写的代码无法压缩，webpack无法起作用，因为webpack依赖与npm，作为一位合格的前端开发者nodejs必须会吧，不会的话赶紧去学吧。