前端开发十分钟搞定Vue-cli脚手架

   1.进入node.js官网   http://nodejs.cn/download/

   2.查看 本机系统---计算机---系统属性:  windows版本：     windows7 旗舰版
                                        系统类型：  32位操作系统

   3.选择下载   Windows 系统 (.msi)  32位

   5.next   4次--------install----finish   (安装位置默认-------C:\Program Files\nodejs\)

至此node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

打开命令行工具（在当前文件夹下按住shift，右击鼠标—打开命令行工具）：

node -v (查看node.js是否安装成功及版本号)(在4.x版本以上)

npm -v (查看npm版本号)(在2.3版本以上)

安装vue-cli:

           OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失

败，所有我还需要npm的国内镜像—cnpm。

           安装cnpm：

           在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，完成之后，我们就可以用cnpm代替npm来安

装依赖包了。

           1.打开命令行窗口，输入cnpm install -g vue-cli,回车  （有一个安装的过程，就可以全局安装了），

           2.等安装完成后，就可以使用vue这个命令，可以先看一下它的版本号：vue -V  (出现版本号说明我们已经安装成功了，可以使用vue这个命令

了)

           3.下面开始下载模板，vue init webpack vue-example1 （其中vue-example1是我们在本地创建的文件夹）(回车)

           4.下一步需要对第三方的模块进行安装，先cd进入到目录下边：

               cd vue-example1    (一定要先进入创建的项目文件夹下)
               npm install (把所有的模板全安装，有很多模块，安装需要过程) 

           5.安装好后，启动应用，打开vue-example1 文件夹后，在window系统下，按住shift键，右击----选择在此处打开命令行窗口

           6.打开之后输入npm run dev  (启动应用) （这个是在package.json中配置的）（启动应用后，自动会跳到welcome to Your Vue.js APP页面

），

           7.嫌这样启动麻烦？每次都要输入一次，有没有另一种启动方式呢？

           8.将整个项目放入IDE里面，讲解的老师用的是webstrom,来看一下webstrom是怎么来启动我们应用的：

                 一.打开package.json文件，这里面是我们项目的配置，和一些信息的描述，其中scripts这一项，是我们定义的一些脚本，其中我们刚

才跑的npm run dev

                   就是用的这个命令：  "dev":"node build/dev-server.js"，它会去执行一下这一串"node build/dev-server.js"，其实就是用node

来跑一个js文件。

           9.在webstrom中呢，右击，找到Show npm Scripts,把这些指令都会显示出来，如：dev 
                                                                                     start
                                                                                     build 
                                                                                     lint

              想启动它，只需要双击就可以，例如：双击以下dev  (等待过程，可以看到，正在启动"node build/dev-server.js")  （自动跳转到

welcome to Your Vue.js APP页面了） （应用打开了）

10.回过头来看我们打开的应用，应用的源码在哪里写着的？所有源码都是在srcz在src这个目录下。src文件夹下main.js是我们的入口文件，

                           （main.js的一些说明）

                在入口文件里面有一些注释，告诉你你可以使用import来进行加载，也可以在运行的时候，去webpack.base.conf中设置一些别名，

                我们使用到了vue,所以要把vue用import把它导进来，   import Vue from "vue"，

                还导进了App        import App from "./App"     (./App 是相对路径，相对main.js这个文件，其实就是App.vue这个文件，在

webpack.base.conf中配置之后，就可以不用写后缀名了)，

                还导进了router     import router from "./router"  （因为我们在选择使用模板的时候，使用了router，所以它会自动把router配置

好，把这个目录加载进来）
（它其实加载得失router文件夹下面的index.js，可以简写，不用写index.js就

行了）

                Vue.config.productionTip = false  （关闭我们生产环境的一些提示），

 new Vue({              //启动我们的应用                
    el:"#app",          //挂载点，以id=app  这么一个元素作为挂载点 
     router,            //路由，（如果说想在应用中使用路由这个功能，先把它给注入进来，router,是ES6的语法，可以写成router：router，其实就

是我们导进过来的对象import router from “./router”）
template:'<App/>’,//应用的模板，用到了App这么一个组件，其实就是我们导进的App:import App from “./App” ,用的时候要注意，先要通过

components:{ App }把它给注册进来
components:{ App }

});

11.App.vue这个文件做了一些什么事情？（是我们整个组件的一个入口）

            分为三个部分：   1.模板template        

                             2.逻辑 script

                             3.样式 style

<template>
<div id=”app”>
<img src=”./assets/logo.png”> //相对路径 加载了一个logo
<router-view></router-view> //路由匹配到那些路径加载的视图
</div>
</template>

<script>
export default { //ES6的语法 export default后面导出一个对象
name: ‘app’ //定义一下当前组件的名字，需要用的时候把这个组件給导出去
}
</script>

12.看一下路由是怎么起作用，把<router-view></router-view> 放到App.vue这个文件中的？

13.打开router下的index.js这个文件，这里面就是跟我们路由一些配置相关的，

一.用到了vue,把它加载进来：import Vue from 'vue',

二.也用到了router,把它加载进来：import Router from 'vue-router',

三.import HelloWorld from '@/components/HelloWorld'  一个别名，在build文件夹里有一个webpack.base.conf.js文件，这里面是webpack的配置：

 在这个文件里可以看到这一项配置：resolve: {
                                           extensions: ['.js', '.vue', '.json'],    // 加载文件的时候不用写后缀名，（是因为在这里面已经

配置过了）
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’, //别名 @符号就代表了src这个路径
‘@’: resolve(‘src’),
}
},

所以 import HelloWorld from ‘@/components/HelloWorld’ 的意思相当于 import HelloWorld from ‘src/components/HelloWorld’

14.Vue.use(Router) 作用是用来安装vue-router这个插件的，可以扩展vue的功能，之后再去安装插件的时候都会使用到vue.use这个函数

15.export default new Router({
routes: [
{
path: ‘/’,
name: ‘Hello’,
component: HelloWorld
}
]
})

export default //ES6提供的，用来导出这个模块里面某些API的，导出的是用new Router来创造的一个实例，

routes: [ //这个函数里我们其实传过去就是对路由规则的配置
{
path: ‘/’, //斜杠代表根目录下边，如果我们访问根目录下面，它渲染的是component对应的视图，就是hello这么一个组件
name: ‘Hello’,
component: HelloWorld
}
]

16.修改components文件夹下的helloworld.vue文件中：

export default {
name: ‘HelloWorld’,
data () {
return {
msg: ‘Welcome tui my Vue.js App’
}
}
}

修改return中的内容，没有刷新页面时，可以看到视图会实时更新，这就使用到了某一个模块—–热加载，

在不刷新视图的情况下，某一个组件里面的数值发生改变了，那么他就会更新改变的那个内容。