使用VueJs开发单页面应用经验总结

最近在构建vue项目，整体已经完成，今天来总结总结。

1.项目搭建

由于是vue+node项目，所以本机必须装有nodejs 以及npm。开发环境的搭建呢网上教程一大堆，不会的同学可以自己去看看。这里我想强调一下的是，在安装过程中有一个jslint选项（JavaScript验证工具），我的建议是选择NO，如果你有非常专业的js代码风格，可以使用，当然新手还是算了吧。

2.项目结构

 

 

项目构建完了以后的结构就是这个样子

*不包括dist文件夹（项目使用webpack打包后的文件夹，构建的项目中不包括此文件夹）

其中的index.html文件是这个前端的页面入口（单页面应用）

接下来主要的开发工作都是在src目录下

src目录结构如上图

1.assets是项目的所有图片文件

2.components是所有的模块化组件，common为公共组件

3.jsdao下为公用的js方法

4.router为vue-router文件

5.vuex为状态管理的文件夹

6.App.vue是页面最外层的顶层组件

7.main.js主要是new一个vue对象

好的，接下来我们一一细说

1.assets文件没有什么可说的了

2.components也就是组件

分为以下几个部分

2.1组件的创建

新建一个.vue文件，新建完的文件包括三个部分：