首先查看电脑是否已经安装vue并查看版本：
window+R快捷打开命令行，cmd，输入node -v回车
如果未安装操作步骤如下：
1：$ cnpm install vue（新电脑安装Vue，永久）
2：$ npm install –global vue-cli（安装vue-cli脚手架构建工具，永久）
3：$ vue init webpack my-project（初始化Vue，创建一个基于 webpack 模板的新项目）
4：回车，填写y/n （ESLint要选择n,其他全部y）；
5：$ cnpm install（安装项目所需要的依赖，也许会自动安装，可省略）
6：（cd 文件夹名称）+本地运行项目npm run dev（查看readme里面步骤）
7：打包npm run build（项目完成发布时候才运行）
项目开始步骤：
1：src-compoents（组件文件夹）-创建页面.vue
2：assets放公共静态css/js/image/等资源
3：router:配置路由（唯一一个路由文件）
ctrl+alt+d注释
突出显示匹配标签标记，安装vincaslt
中文：安装language packs插件后，Ctrl+shift+p,输入language文件找到locale.json更改配置en>zh-cn
这是vue 创建的最简单的项目结构,接下来我会给大家建议,项目如何分类文件名,这不是固定的写法,但,是更多开发者的共同选择
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
├── tests # 测试
├── .eslintrc.js # eslint 配置项
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
// ….
这里并不是全部的分类都是这样, 只是把一些,大家习惯这样写的都放在这里.
vue着手开始之大白话
1：首先打开app.vue.盛放最大的框架 <router-view/>一个跳转的路由,相当于这一块界面是可以替换的2：进入index.vue主页面，开始布局， <Header></Header>是固定的所以直接这样写。
<keep-alive>
<router-view></router-view>
</keep-alive>
这中间是变化的，所以这样写。
3：开始写局部里面的小版块了。可以看头部是静态不变的，所以用header标签写起来，点击不同的tab切换不同的页面（路由）
4：点击tab时候切换的页面有2种布局。
（1）：只有一个整体的页面
（2）：页面分为左右2个部分。这个时候发现左边是静态的，右边是动态的。所以在这个页面将动态的又封装起来，点击左边菜单切换路由。
其中以el标签的是引用模块化elementUI，引用他的样式和方法
一般就elementUI和IVew，引入进来，倒进来直接用