vue-lic脚手架安装与部署项目流程

安装node.js

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如果出现相应的版本号，则说明安装成功。
另外nodejs就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。
注意：
安装目录，不要有中文不要有空格

安装淘宝镜像cnpm

命令行中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 安装个是因为我们用的npm的服务器是外国，对国内的宽带有限制，导致安装依赖有失败或极慢，所以就用这个cnpm来安装我们所需要的依赖。安装完成之后输入 cnpm -v，如果出现相应的版本号，则说明安装成功。

安装 vue-cli 脚手架

安装vue-cli脚手架构建工具，打开命令行工具输入： cnpm install –global vue-cli ，安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

通过(脚手架)初始化项目(自动创建项目完整目录与配置文件)

在计算机中选好我们的项目路径。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here
命令行中输入 vue init webpack 项目名称
注意:项目名称不能用中文。
项目创建好后会在对应的目录下创建完整项目目录

安装依赖工具包

在命令行中进入创建的项目文件夹，输入 cnmp install

启动项目

在命令行中输入 cnpm run dev 就会启用内置服务器，会显示一个地址，复制粘贴到浏览器地址栏就会出血Vue界面，停止服务器用: ctrl+c

项目目录了解

vue 项目启动流程

1. 在执行cnpm run dev 的时候 ，会在当前目录下找一个package.json文件，启动服务器默认端口8080
2. 找到src目录文件main.js ,创建项目唯一 new Vue();要加载模板内容 App, App是src目录 App.vue结尾文件,有一个 <router-view>router-view>
3. 在src目录有一个router文件夹,该文件夹下有一个 index.js文件:该文件是配置路由词典,指定路由地址

vue-cli的特性

1. hot reload(热部署) 当代码修改，直接预览效果
2. 框架己经创建好，快速进入开发(完整项目录)
3. 组件组织方式
   将组件所有内容保存在一个文件 .vue(一个文件一个组件)放在src目录 components

vue-cli的组件创建

1. 单文件概念
   文件扩展名为 .vue 的 sinle-file components (单文件组件)
   有3个标签
   
   
   
2. vue 创建组件

2.1 创建 .vue结尾文件
    项目安装位置/src/component/login.vue(自己创建的组件名称)
2.2 配置路由词典
    项目安装位置/src/router/index.js
    引入要使用组件
        import Header from '@/components/login'
    配置路径
        {
            path: '/login',
            name: 'login',
            component: login
        },
2.3组件创建
    在login.vue中
    <template>
        html...
    </template>