深入理解Vue-cli搭建项目后的目录结构探秘


Posted in Javascript onJuly 13, 2017

我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧!

一、前言

这里先说一下使用vue-cli之前的事情。

由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸)

├── css

├── images

├── index.html

└── js

由于之前我连路由,组件什么的都不会用,所以项目效果可想而知,连点击文章标题显示文章都是用弹窗来实现的(捂脸),一按返回就退出了整个网页有木有,体验效果极其糟糕,于是自己强行加了几个“返回”按钮,(实际就是v-show的切换emmmm),各种栏目的切换也是通过这个,然后。。。产品就要求我改了,啊啊没办法,只好重写咯,这时学长推荐了使用vue-cli来快速开发,于是就开始了vue-cli的尝试之旅

二、Vue-cli 使用旅程

之前看Vue官方文档的安装的时候,在命令行工具那里看见了 vue-cli 的安装,也尝试过,不过也就是初始化了一个项目,然后看见哇竟然自动在本地localhost:8080跑起来了,觉得很神奇,然后。。就没管它了,感觉自己像个智障,然后之前初始化的也找不到了,然后就重新初始化了一个项目,命令如下

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖,走你

$ cd my-project

$ npm install

$ npm run dev

没错,我就是直接从官网复制粘贴过来的,不过把 my-project 改成了 campusnews,emmm..在VSCode上把文件夹打开一看,我屮???,这些都是什么玩意,这么一大堆东西,鬼都看不懂哦,不说了,放上来体会一下:

.......算了,本来打算用tree生成一下所有的结构树,还是就展示一下主目录吧~

├── build

├── config

├── index.html

├── node_modules

├── package.json

├── package-lock.json

├── README.md

├── src

└── static

看不懂哦,只好去找找资料了,以下是我经过查找资料和自己的理解来讲述的,如有错误希望指正~

1. build

这里主要是放webpack的一些配置,webpack是前端网站的一种打包工具,具体的可以去这个链接看看哦,是别人翻译好的。

webpack中文指南

目录结构:

├── build.js

├── check-versions.js

├── dev-client.js

├── dev-server.js

├── utils.js

├── vue-loader.conf.js

├── webpack.base.conf.js

├── webpack.dev.conf.js

└── webpack.prod.conf.js

(1)build.js

build文件夹里有一个 build.js ,是我们完成项目之后需要运行的, 可以将我们的项目文件打包成 静态文件,存放在项目根目录的 dist 文件夹中(现在目录里还没有这个文件夹,build的时候会自动生成),当然你可以自己设置路径,是在。。应该是在 config 文件夹中的 index.js 中改,可以指定主页,默认是 index.html。

(2)check-versions.js

主要是检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来。

(3)dev-client.js

应该是本地客户端开发中有关热更新的吧~

(4)dev-server.js

是一个用作服务器端的东西,涵盖了express和它的一些模块,为了在本地服务器上把我们的项目跑起来的一个文件,引入了反向代理的模块,我们可以用来发起跨域请求。

(5)utils.js

(是一个功能模块?)里面引入了一些css-loader,以便于解析各种格式的css,如 less,sass 什么的。

(6)vue-loader.conf.js

它把上面的 utils.js 引入了,应该是用于切换 开发模式和 生产模式的文件吧,以便于用不同模式来解析css。

下面那三个我只知道是webpack的一些打包的设置,比如指定入口文件啊,依赖安装路径啊,对不同后缀的文件用不同的loader去解析呀什么的。目前不了解这个也对我们开发项目影响不大~

2. config

不知道干啥的,应该是配置文件

3.node_modules

依赖所存在的文件,就是我们一开始使用 npm install 安装的东西,都在里面,以后我们要添加依赖也是放在这个里面,可能有人会又疑问,你 npm install 后面啥也没加啊,你安装了啥。一看就是不了解 npm 的人(虽然我也不了解(捂脸)),npm install 可以从当前根目录中的 package.json 文件中读取所要安装的模块的名称和版本,然后一次性安装所有的依赖。

4.src

终于到了最重要的部分,src目录就是一般我们需要写的地方了,先放一下目录结构:

├── App.vue

├── assets

├── components

├── main.js

└── router

(1)App.vue 是我们的主组件,也是我们所有组件和路由的出口,之后他会被渲染到我们项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式,比如说 css reset,字号,字体什么的。

(2)assets 

是我们放一些静态图片资源的目录,虽然我没有放图片在里面。

(3)components

这里存放的是我们写的各种组件,各个组件联系在一起组成一个完整的项目

(4)router

我们定义路由的地方,虽然也可以直接在 main.js 中直接定义,但是分开的话结构更加清晰,路由的定义我们下次再说~

(5)main.js

入口文件,引入了 vue模块 和 app.vue 组件 以及 路由router,我们需要在全局使用的一些东西也可以定义在这里面。

5.static

用于存放我们需要使用的一些外部的js、css文件,需要使用的时候从这里引到文件内。

├── package-lock.json

├── README.md

第一个我不知道是干啥的,第二个就是写说明文档的咯。

好了,至此整个vue-cli的目录我们都过了一遍,虽然我写的不是很详细,甚至有错误,待我慢慢学习并更新咯,希望各位看官老爷能指出,谢谢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
最简单的tab切换实例代码
May 13 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Vue按需加载的具体实现
Dec 02 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
Vue如何实现变量表达式选择器
Feb 18 Vue.js
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 #Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 #Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 #Javascript
浅谈关于axios和session的一些事
Jul 13 #Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 #Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 #Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
mongodb和php的用法详解
2019/03/25 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
深入理解python中的select模块
2017/04/23 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python中kmeans聚类实现代码
2018/02/23 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
留学自荐信
2013/10/10 职场文书
创业计划书如何编写
2014/02/06 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2014年库房工作总结
2014/11/26 职场文书
勤俭节约主题班会
2015/08/13 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
python中的被动信息搜集
2021/04/29 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript