Vue在Windows系统下本地项目的安装与部署
一、项目的前期准备
1、node.js 的安装
Vue项目通常通过webpack工具来构建，而webpack命令是依赖node.js开发环境的，所以首先要安装node.js。node.js的官方地址为：https://nodejs.org/en/download/，下载相应的版本。
测试是否安装成功：在终端输入npm若显示npm相关命令则安装成功。
2、cnpm 的安装
npm包含开发过程中依赖的包部署在国外，下载起来比较慢，国内的淘宝对npm的镜像服务器cnpm是比较快的。我们通过npm下载cnpm，完成以后在下载需要以来的包是就可以使用cnpm命令下载。
cnpm下载命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
3、vue-cli 的安装
vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
Vue-cli安装命令：cnpm install -g vue-cli
测试是否安装成功：在终端输入vue若显示vue相关命令则安装成功。
二、创建一个vue项目
1、
初始化名为first_vue的项目
在命令行中运行命令 vue init webpack first_vue（如果不行，使用 vue-init webpack first_vue命令来安装）。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。
? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
? Author (*******)；? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
这里选择Runtime + Compiler: recommended for most users；
? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
? Use ESLint to lint your code? (Y/n)n 是否使用ESLint，这里根据需求选择；
? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard)
? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
2、启动first_vue项目
根据提示：
cd first_vue
然后
npm run dev
启动项目。
根据提示我们的项目在本地的8080端口上运行。（若是你在本地想把项目启动在其他端口上，只需在：项目/config/index.js文件下dev配置下的port改为你需要的端口就行）。
三、项目如何运行
1、vue页面结构
vue页面中有三大模块<template></template>、<script></script>、<style></style>。
<template></template>中写我们的页面。template下必须只有一个根元素，可以使用一个容器元素包裹住，例如div。页面从index.html（首页入口文件）文件开始，继承src/App.vue（项目入口文件），然后再显示每个vue页面。
<script></script>中写我们的脚本。其中可以包含：
data：定义我们的数据类型。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。
created：在实例创建完成后被立即调用。
components：包含 Vue 实例可用组件的哈希表。将引入的组件放在这里。
methods：将定义的函数写到这里
<style></style>写页面样式。
2、路由如何跳转
浏览器中请求的路由会在router文件夹中进行映射。需要用到的vue在使用前import引入。