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

<template>  <div >        <h1>first.vue</h1>  </div></template>

Two.vue

<template>  <div >        <h1>two.vue</h1>  </div></template>

定义路由文件(在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

<template>  <div id="app">    <img src="./assets/logo.png">       <div class="list-group">         <router-link to="/">首页</router-link>         <router-link to="/first">first</router-link>        <router-link to="/two">two</router-link>      </div>    <router-view></router-view>  </div></template><script>export default {  name: 'app'}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

然后执行命令:cnpm run dev

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

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