vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(二)

推荐我的vue教程:VUE系列教程目录

通过上一篇文章vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一),我们已经新建好了一个基于vue+webpack的项目。本篇文章将详细的帮助大家对这个项目的结构进行搭建,然后我们要从这里慢慢进入实战。

提示:希望大家还是多去官网看看教程,踩踩坑,你会有些疑问,我呢则会把我踩过的坑告诉你们,让你们知道怎么解决,不要害怕有疑问,这正是你驶向成功的颠簸。

一、项目目录以及文件结构

如上图所示,我们新建的目录结构就是这样的了。

通过表格给大家展示一下这些目录结构的作用:

目录/文件 说明
build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。
config 配置目录,我们可以进行端口的配置,默认配置没有问题,所以我们也不用管
node_modules 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,有时我们需要安装一些其他东西,那些东西放在这里,不过高兴的是,我们也不用管
src 我们的开发目录,基本上绝大多数工作都是在这里开展的,这里才是我们需要关注的
static 资源目录,我们可以把一些图片啊,字体啊,放在这里。
test 初始测试目录,没用,删除即可
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了
index.html 首页入口文件,基本不用管,如果是开发移动端项目,可以在head区域加上你合适的meta头,有时偶尔会进行一些改动
package.json 项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。
README.md 不用管

如上,基本上就是这么个情况。对于我们来说其实最重要的,还是src文件夹。

二、SRC文件夹的情况

如上图所示,这是src文件夹下面的初始情况,里面有一些示例代码之类的。比如,它吧logo放在assets文件夹里面。我个人很不喜欢这么做,因为代码是代码,资源是资源,各归其位比较好。

commponents目录(组件文件目录):里面放了一个演示的组件文件,一般在开发中我比较喜欢把VUE组件放在这里面,你可以打开看下。当然,也可以直接删除。

App.vue是项目入口文件(最终的编译全靠它)。当然,我们需要改造,改造成我们可以使用的样子的。后面的博文会说。

main.js这是项目的核心文件。全局的配置都在这个文件里面配置,这里可以配置全局组件和指令等,很好奇吧?我后面会详细的讲这里怎么搞。

整理目录

上面只是让大家了解一下具体是什么情况,下面,我们开始动手,把不想管的干掉,然后把src变成这个样子:


这里关于目录这样构建是有原因的,其中:

文件\目录 说明
component 是存放VUE组件的,组件文件夹我们写的一些公用的内容可以放在这里的。
config 核心配置文件夹,是放一些基础配置,比如一些路由,和api接口
frame 存放自路由的文件夹或者框架
page 项目模板文件夹,存放我们的单页面富应用,所有的页面文件全部存放与此,后面会根据需要来建立各种子目录
style 样式存放目录

我会在以后文章中慢慢详细给出每个文件的代码的,注意,我们开发采取用scss来写css文件的。所以看官你最好也学习一下scss的相关内容。

vue虽然支持每一个模板里面写css,这样可以做到随用随取。但是,在开发中不要这样做,因为这样会让我们很难维护,并且样式之间不能够复用,最好是把css给单独放出来,因为这样便于整理,另外,使用scss的朋友都知道,我们会预设大量的变量,代码片供我们在写css的时候使用,如果每个模板文件里面都需要引用一次那并不是明智之举。

你可以根据我的这一套来。然后等你全部融会贯通了之后,你如果有更好的意见你可以提出来我们进行探讨。

小结:

很简单的项目目录搭建,了了几句,单独提出来,只是希望教会大家有一个良好的项目目录搭建。

由于每天的时间不够,所以文章很短,但是依然感谢大家对我的支持与厚爱。

提示:在最近几天我会慢慢附上VUE系列教程的其他后续篇幅,后面还有精彩敬请期待,请大家关注我的专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容