第一次使用vue2.0开发，从搭建项目到后期遇到的问题及后期的优化！闲来无事分享一波！

vue 项目搭建

前言

基于Vue.js 2.x系列 + Element UI 的组件化开发方案,vue.js不支持IE8及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。vue的安装依赖于node.js,要确保你的计算机上已安装过node.js。可进入cmd编辑器，输入命令 node -v进行查看。node尽量要用新一些的版本，否则后续安装会提示node版本过低。去node官网下个新版的node重新安装就可以。

安装步骤

1.全局安装node.js
下载地址：https://nodejs.org/en/download/

    安装成功后可进入cmd编辑器，输入命令 node -v进行查看,出现版本号说明安装成功，npm是包管理工具，noed安装好就有npm指令了

“`
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。

C:\Users\user>node -v
v8.4.0

C:\Users\user>
“`

2.全局安装webpack 和 vue-cli

npm install -g webpack
npm install -g vue-cli


3.根据vue-cli构建项目

vue init webpack my-vue  //创建一个项目，名称my-vue

cd my-vue   // cd 到my-vue的根目录下

npm install  // 下载项目依赖

npm run dev  // 让该项目在本地上跑起来

这样一个基础的vue项目目录就自动会展现在你面前，我们可以来看一下其自动生成的基础文件：

项目结构简单介绍

├── build //  是一些webpack的文件，配置参数什么的，一般不用动 
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config // 环境配置文件,是vue项目的基本配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── node_modules // npm包文件 是项目中安装的依赖模块 
├── src // 源码文件夹，基本上文件都应该放在这里。 
│   ├── assets //资源文件夹，里面放一些静态资源 
│   │    └── logo.png
│   ├── components //这里放的都是各个组件文件
│   │    └── Hello.vue 
│   ├── router
│   │    └── index.js 
│   ├── App.vue  //App.vue组件 
│   └── main.js //入口文件
├── static  //生成好的文件会放在这个目录下。
├── .babelrc // babel配置文件 , vue开发需要babel编译 
├── .gitignore // gitignore忽略文件
├── .editorconfig // 编码风格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首页模板
├── package.json // 包管理文件
└── README.md // 描述文件

main.js文件介绍 这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。 “` /*引入Vue框架*/ import Vue from ‘vue’ /*引入资源请求插件*/ import VueResource from ‘vue-resource’ /*重置样式*/ import “assets/css/base.css” /*基本JS*/ import “assets/js/common.js” /*引入路由设置*/ import “./routers.js” /*使用VueResource插件*/ Vue.use(VueResource) “` App.vue 这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。

import Hello from './components/Hello' export default { name: 'app', components: { Hello } } app { font-family: ‘Avenir’, Helvetica, Arial, sans-serif; -webkit