参考文章
用到了bootstrap
我们将会选择使用一些vue周边的库 vue-cli, vue-router,vue-resource,vuex
1.使用vue-cli创建项目
2.使用vue-router实现单页路由
3.用vuex管理我们的数据流
4.使用vue-resource请求我们的node服务端
5.使用.vue文件进行组件化的开发
下面是自己的详细构建过程
- node npm vue-cli 全局安装好
- 创建一个webpack项目并且下载依赖(利用vue-cli)
vue init webpack
Paste_Image.png
Paste_Image.png
- 懒惰的人全部一次性安装所有的依赖包
cnpm iorcnpm install
Paste_Image.png
- 启动初始化的项目
cnpm run dev
但是出错了，自己很懵逼。记得把别的运行的程序的控制台关掉，因为端口冲突，导致出错。
Paste_Image.png
正确：
Paste_Image.png
- 开始正式来编写属于自己的网站了
1). 特意安装四个库到node_modules
bootstrap 作为UI库
npm i vue-resource vue-router vuex bootstrap --save
Paste_Image.png
2). 通过编写入口文件 去加载第一个页面
初始状态：
Paste_Image.png
Paste_Image.png
我所做工作：
- 把我们的网站的总体框架页面app.vue 搭建好（因为是单页面，so 这个app.vue是网站的总体布局）
Paste_Image.png
- 因为我们第一个页面home so 我们要建立home.vue
Paste_Image.png
- 当我们把页面vue写好 我们要开始写路由
Paste_Image.png
- 最后一步：在主框架把路由搭进来 就可以实现跳转
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文件，发现不报错了。
