Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
来源:互联网 发布:淘宝达人账号如何注销 编辑:程序博客网 时间:2024/05/07 05:09
Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
目录索引
《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》
《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》
《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》
《Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表》
《Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由》
通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》,我们已经新建好了一个基于vue+webpack
的项目。本篇博文将详细的厘清一下这个项目的结构,然后我们要从哪里开始等。
项目目录以及文件结构。
如上图所示,我们的目录结构就是这样的了。
head
区域加上你合适的meta
头package.json项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。README.md不用管如上,基本上就是这么个情况。重要的,还是src
文件夹。
SRC文件夹的情况
如上图所示,这是src文件夹下面的初始情况,里面有一些示例代码之类的。比如,它吧logo
放在assets
文件夹里面。我个人很不喜欢这么做,因为代码是代码,资源是资源,各归其位比较好。
commponents
目录里面放了一个演示的组件文件,你可以打开看下。当然,也可以直接删除,然后根据我的博文往下走。
App.vue
是项目入口文件。当然,我们需要改造,改造成我们可以使用的样子的。后面的博文会说。
main.js
这是项目的核心文件。全局的配置都在这个文件里面配置,我后面会详细的讲这里怎么搞。
整理目录
上面只是让大家了解一下具体是什么情况,下面,我们开始动手,把不想管的干掉,然后把src
变成这个样子:
如上图所示,把文件夹和文件都新建好,后面的博文我会详细给出每个文件的代码的。这里,都新建空文件即可。注意,我是用scss
来写css
文件的。所以看官你最好也学习一下scss的相关内容,我的博客里面有,搜索也是一大把。
vue支持每一个模板里面写css,这样可以做到随用随取。但是,我个人不太喜欢这样,我还是喜欢吧css给单独放出来,因为这样便于整理,另外,使用scss的朋友都知道,我们会预设大量的变量,代码片供我们在写css的时候使用,如果每个模板文件里面都需要引用一次那是及其操蛋的。
你可以先根据我这一套来。然后等你全部融会贯通了之后,你可以想怎么玩儿怎么玩儿。随便。
这篇博文先到这里,后面我们继续讲。
本文由FungLeo原创,允许转载,但转载必须附带首发链接。如果你不带链接,我将采取包括但不限于深深的鄙视你等手段!
首发地址:http://blog.csdn.net/fungleo/article/details/53171614
- Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
- Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
- Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
- Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
- Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
- Vue2+VueRouter2+webpack 构建项目实战
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
- 公众号第三方平台和微信公众号平台的区别与开发步骤
- 程序中乱码解决方案
- 集合各实现类的底层实现原理
- 设置mysql远程链接
- Redis设计思路学习与总结
- Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
- Win10获取VSS、CVS服务器的代码很慢
- nginx问题定位之监控进程异常退出
- 你真的需要掌握多种编程语言吗?
- 指令在服务中添加tomcat服务
- FZU 2150 Fire Game(bfs)
- ./cut.sh: line 37: warning: here-document at line 5 delimited by end-of-file (wanted `EOF')
- 【SAP HANA】SAP HANA开篇
- Struts2 基础