深入理解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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php 特殊字符处理函数
2008/09/05 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
详解JS构造函数中this和return
2017/09/16 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Python3基础之函数用法
2014/08/13 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
推荐信模板
2014/05/09 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python