Vue 2.0
最近想练习一个vue.js的项目，然后在网上找了些案例，但是查询到的大部分都是用vue-cli脚手架和webpack模板自动生成项目结构。
用vue-cli自动生成这种方法固然简单快捷，但是对于一些新手小白来说，光是搞清楚那些配置文件的作用，就要用不少的时间去学习和理解。
所以，我自己用手动构建结构的方式，写了一个基于Vue2.0的移动端小项目，代码中的每一个配置，我都写有注释解释，希望对那些像我这样刚刚入门vue的朋友们有所帮助。
https://github.com/zhangqian00/Vue2.x-mobileSystem
技术栈：
- Vue2.0
- Vue-Router 路由
- Mint-ui 基于vue的ui框架
- M-ui 移动端ui框架
- Axios 第三方数据请求插件
- Mockjs 生成随机数据，拦截 Ajax 请求
项目效果图
效果图
创建项目结构
初期简单的结构
介绍文件作用
- components 存放组件的文件夹
- static 存放一些静态文件，例如图片
- index.html 展现页面
- main.js 入口文件，程序运行会依照里面的配置
-
package.json node依赖包记录，用
npm init命令生成 - webpack.config.js webpack配置文件
配置webpack.config.js
因为项目是使用运行时构建方式，这样也使得vue组件的运用更加方便清晰，所以还是需要webpack作为辅助工具。
webpack.config.js
此文件并没有配置打包的需求的配置，可根据需求来自行配置。
个人感觉这样一步一步的手动创建文件，对于小白来说，可以对整个Vue项目有一个很清楚的了解。每一步都知道为什么这样做，做了有什么作用，对Vue或者webpack的入门学习都有一个基本的认识，对以后的学习也很有帮助。
我在每一个文件里代码都做了注释，解释代码的作用。这样可以让正在学习Vue的朋友们看得懂我写的代码，也让我自己在写注释的过程中理一理自己所理解的意思。
https://github.com/zhangqian00/Vue2.x-mobileSystem
这是项目的GitHub地址，希望能帮助正在学习Vue或webpack的朋友，也欢迎各位指出其中不足指出。
网友评论