vue2.0全家桶手把手教学（一）_构建单页面实践

参考文章
用到了bootstrap
我们将会选择使用一些vue周边的库 vue-cli, vue-router,vue-resource,vuex

1.使用vue-cli创建项目
2.使用vue-router实现单页路由
3.用vuex管理我们的数据流
4.使用vue-resource请求我们的node服务端
5.使用.vue文件进行组件化的开发

下面是自己的详细构建过程

1. node npm vue-cli 全局安装好
2. 创建一个webpack项目并且下载依赖(利用vue-cli)
   vue init webpack

Paste_Image.png

Paste_Image.png

3. 懒惰的人全部一次性安装所有的依赖包
   cnpm i or cnpm install

Paste_Image.png

4. 启动初始化的项目
   cnpm run dev
   但是出错了，自己很懵逼。记得把别的运行的程序的控制台关掉，因为端口冲突，导致出错。

Paste_Image.png

正确：

Paste_Image.png

5. 开始正式来编写属于自己的网站了

1). 特意安装四个库到node_modules
bootstrap 作为UI库
npm i vue-resource vue-router vuex bootstrap --save

Paste_Image.png

2). 通过编写入口文件 去加载第一个页面
初始状态：

Paste_Image.png

Paste_Image.png

我所做工作：

1. 把我们的网站的总体框架页面app.vue 搭建好（因为是单页面，so 这个app.vue是网站的总体布局）

Paste_Image.png

2. 因为我们第一个页面home so 我们要建立home.vue

Paste_Image.png

3. 当我们把页面vue写好 我们要开始写路由

Paste_Image.png

4. 最后一步：在主框架把路由搭进来 就可以实现跳转

Paste_Image.png

Paste_Image.png

一个最简单的demo构成

注意 在v-for遇到错误

因为自己用的是vscode
去vetur插件的github上搜了一下，发现有人提这个报错问题，该插件的作者给出了解决办法：

This is intended ESLint feature. You can turn off eslint check in future release. 

Setting vetur.validation.vue-html to false will disable it.

这是ESLint的功能。对vue进行了eslint检查。

那么我们就把eslint对该插件的检查关闭，

在vscode中，打开 文件>首选项>设置 找到 

vetur.configuration 把  "vetur.validation.template": true  改成

"vetur.validation.template": false
 
保存，我们再看一下vue文件，发现不报错了。