深入理解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 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
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
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
简单实现python聊天程序
2018/04/01 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
专业技术职务聘任书
2014/03/29 职场文书
工程款申请报告
2015/05/15 职场文书
孔子观后感
2015/06/08 职场文书
股东协议书范本2016
2016/03/21 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
python面向对象版学生信息管理系统
2021/06/24 Python
OpenFeign实现远程调用
2022/08/14 Java/Android