vue 项目:文件夹 结构 、配置详解

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

1. 项目配置

首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉。本次开发使用到的有: vue , vuex , axios , elementUI 。

然后可以按官方指引,使用 vue-cli 搭建 vue 的项目,在项目里按照上面的文档尝试修改,加深理解:

?

1

2

3

4

5

6

7

8

9

10

11

12

# 安装依赖库,建议指定 vue 和 element 版本,避免版本升级带来意料之外的 bug

$ npm install vue@2.1.6 element-ui@1.4.6 vuex axios

#全局安装脚手架

$ npm install -g vue-cli

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

$ vue init webpack my-project

# 进入项目目录

$ cd my-project

# 安装依赖

$ npm install

# 运行项目

$ npm run dev

运行之后,看到以下页面表明项目环境搭建成功:

2. 项目结构

搭建成功后,使用编辑器打开项目目录,大致是这样的结构:

相关文件和文件夹的含义:

  • build 文件夹: 里面是对 webpack 开发和打包的相关设置,包括入口文件、输出文件、使用的模块等;
  • config 文件夹: 主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
  • node_modules: 项目的依赖库;
  • src 文件夹: 我们主要操作的地方,组件的增加修改等都在这个文件夹里操作,下文会有详细介绍;
  • static 文件夹: 静态资源文件夹,放置不会变动的资源,直接被复制到最终的打包目录(默认是dist/static)下;
  • .babelrc: 使用 babel 的配置文件,用来设置转码规则和插件;
  • .editorconfig: 代码的规范文件,规定使用空格或 tab 缩进,缩进的长度是两位还是四位之类的代码风格,使用的话需要在编辑器里下载对应的插件;
  • .eslintignore: 指定 eslint 忽略的文件;
  • .eslintrc: 配置 eslint 的检测规则,强制按照规则书写代码;
  • .gitignore: 指定 git 忽略的文件,所有 git 操作均不会对其生效;
  • .postcssrc: 指定使用的 css 预编译器,里面默认配置了 autoprefixer ,自动补全浏览器前缀;
  • favicon.ico: 浏览器标签页 title 旁边的小图标,这是需要我们自己粘贴过来的;
  • index.html: 首页文件,项目运行的时候,会自动将我们在 src 文件夹里生成的组件插入这个文件里;
  • LICENSE: 项目声明的 license;
  • package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新;
  • package.json: 指定项目开发和生成环境中需要使用的依赖库;
  • README.md: 相当于是一个备注文件,对项目开发过程中需要注意的地方进行一些说明。

3. src 文件夹结构

src 文件夹里的文件夹设置是灵活的,可以根据自己的习惯进行,不必雷同。下面是这次项目的结构:

  • assets: 放置静态资源,包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件,是因为要在组件的 css 标签里加入 ‘scoped‘ 标记,将其作用范围限制在此组件以及调用它的父级组件中,避免污染全局样式;
  • components: 放置通用模块组件。项目里总会有一些复用的组件,例如弹出框、发送手机验证码、图片上传等,将它们作为通用组件,避免重复工作;
  • http: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件;
  • mixins: 放置混合选项的文件。具体来说,相当于是公用函数的集合,在组件中引用时,可以作用于组件而不必书写重复的方法;
  • pages: 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构,再引入通用模块组件,形成完整的页面;
  • router: 放置路由设置文件,指定路由对应的组件;
  • store: 放置 vuex 需要的状态关联文件,设置公共的 state、mutations 等;
  • App.vue: 入口组件,pages 里的组件会被插入此组件中,此组件再插入 index.html 文件里,形成单页面应用;
  • main.js: 入口 js 文件,影响全局,作用是引入全局使用的库、公共的样式和方法、设置路由等。

转自: https://www.jb51.net/article/130508.htm

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DIV 半透明层、 CSS实现网页 背景半透明

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 DIV半透明实现,使用CSS实现DIV成半透明效果,CSS实现层与背景半透明效果。 一、DIV CSS半透明基础介绍 - …

加速时如何换挡

加速时如何换挡,您知道吗?为了使换挡过程顺利进行,变速器内齿轮平稳啮合,必须掌握好发动机转速,在适当时机推动变速杆操纵齿轮啮合。为此,要通过反复练习,一边踩踏油门踏板,一边听发动机运转声…

vue 项目 引用(外部) js、css

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 我的工程结构&#xff1a; 1. 引入 css 有 2 种方式&#xff1a; 方式 1 <script type"text/javascript">import .…

自动挡车挡位的基本知识介绍

一般来说&#xff0c;自动档汽车的自动变速器的档位分为P、R、N、D、2 (或S)、L(或1)等。下面分别详细介绍如下&#xff1a; P (Parking) 停车档&#xff0c;或称泊车档&#xff1a; P用作停车之用&#xff0c;它是利用机械装置去锁紧汽车的转动部分&#xff0c;使汽车不能移动…

解决:(iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8082 -j DNAT --to-destin

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 用 docker 部署一个前端工程&#xff0c;run 后容器有了&#xff0c;却不是运行状态&#xff0c;是创建状态&#xff0c;于是我执行 …

无损压缩——Huffman编码

最近项目中涉及到人脸关键点中神经网络的压缩&#xff0c;采用了性能较好的哈夫曼编码进行。 源码地址&#xff1a;https://github.com/believeszw/HuffmanCompress 1 引言 哈夫曼&#xff08;Huffman&#xff09;编码算法是基于二叉树构建编码压缩结构的&#xff0c;它是数据…

26条安全开车经验 开车20年老司机分享

总有些人&#xff0c;觉得自己开车技术比舒马赫牛叉&#xff0c;市区高速漂移无比潇洒。也总有些人&#xff0c;觉得路是自家的铺的&#xff0c;爱怎么开就怎么开&#xff0c;爱停哪就停哪&#xff0c;哪个不服打开车窗就是一句国骂一个中指。其实他们都没有意识到&#xff0c;…

解决:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 前端 vue 工程 post 请求后端接口&#xff0c;报错&#xff1a; Request header field Content-Type is not allowed by Access-Con…

书写README的各种markdown语法

README 该文件用来测试和展示书写README的各种markdown语法。GitHub的markdown语法在标准的markdown语法基础上做了扩充&#xff0c;称之为GitHub Flavored Markdown。简称GFM&#xff0c;GFM在GitHub上有广泛应用&#xff0c;除了README文件外&#xff0c;issues和wiki均支持…

Apache2.4配置ssl

1》验站 如下截图&#xff0c;验站就是在DNS域名商哪里&#xff0c;在对应host下面&#xff0c;添加一个TXT记录类型&#xff0c;主机记录&#xff0c;记录值后&#xff0c;检测即可。   2》SSL证书申请 阿里云&#xff0c;腾讯云有很多免费证书申请&#xff0c;免费的缺点是…

助你解决新手开车四大问题 为您支招

新手开车起步技巧涉及方方面面&#xff0c;对于新手来说&#xff0c;如何首次将车独自开上路且不发生任何意外是众多人热切盼望的理想方式。但是新手上路难免会磕磕碰碰&#xff0c;发生小摩擦都是在所难免的&#xff0c;那么如何在起步阶段就将发生事故的概率降到最低呢?在此…

VUE - get 、post 请求后端接口:get 、post 写法 (Axios 中文说明文档地址)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Axios 中文使用说明文档地址&#xff1a;Axiox 中文说明文档 我只是记录下写法&#xff0c;两种请求都能正常运行&#xff1a; 1. 安装…

离合器半联动点的判断和技巧 为您支招

现在将离合器半联动的使用方法揭密如下&#xff1a;将离合器抬到车开始动时你就别再抬了&#xff0c;你如果感觉到车有些快了&#xff0c;可再往下踩些&#xff0c;你如果感觉到车有些慢了&#xff0c;可再往起抬些&#xff0c;这样可将车速控制在你想要的速度范围之内。 ● 坡…

VUE:组件间相互跳转、页面带参跳转

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 只是记录下用法&#xff1a; 从 A 页面跳转到 B 页面。 如下写法&#xff1a; A 页面跳转方式&#xff1a; 代码&#xff1a; getdat…

如何调整反光镜和座椅的位置 为您支招

【太平洋汽车网 学车频道】首先要进行座椅的高度调整&#xff0c;上下调整座椅让头部离车顶至少还有一拳的距离。如果座椅调得太高&#xff0c;车辆在颠簸时头部容易碰到车顶&#xff0c;调得太矮了又会影响视线。然后是前后距离的调整&#xff0c;当脚踩住制动踏板至最深处时…

关于hexo与github使用过程中的问题与笔记

快速阅读 如何用github 和hexo 创建一个blog 1.github中要新建一个与用户名同一样的仓库&#xff0c; 如:homehe.github.io - 必须是io后缀。一个帐户 只能建立一个2. 绑定域名 &#xff0c; A记录指向ip, cname记录指向homehe.github.io 3. 配置sshkey - 个人设置 -> SSH a…

CSS 中 的 margin、border、padding 区别 (内边距、外边距)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 图解CSS padding、margin、border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中&#xff0c;设计师可以通过创建定义来控制这…

什么是转向灯?使用转向灯有何技巧?

什么是转向灯&#xff1f;如何使用转向灯&#xff1f;新手司机对车辆还不是很熟悉&#xff0c;如何正确使用转向灯&#xff0c;尤其是在不同路段中该怎么正确使用转向灯&#xff0c;成为了很多新手们的困扰之一&#xff0c;今天我们就来为大家解决这个问题吧&#xff01; 转向灯…

集合练习:登录注册功能

需求&#xff1a; 1、登录账号唯一&#xff0c;在注册时验证输入的账号是否可用&#xff0c;若已存在&#xff0c;则不可用&#xff0c;若不存在则可用2、登录时使用账号密码进行验证1 /**2 * author Administrator3 * 登录信息 4 */5 public class UserLogin {6 …

vue 通信、传值的多种方式(超详细)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件&#xff08;触发事件可以是点击事件、钩子函数等&am…