项目结构

build

构建工具相关的目录

config

配置目录

dist

通过工具打包生成的最终需要上线的目录

node_modules

存放本地开发所有的依赖包的目录

src

源码目录

static

存放图片等静态资源的目录

.babelrc

babel是把新的ES语法,编译成浏览器兼容的语法的编译器,而它需要配置文件.babelrc来配置预设的规范

.editorconfig

定义和维护一致的编码风格。用于语法与编程规范检查

.eslintignore

你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。以下将忽略所有的 JavaScript 文件:

**/*.js

当 ESLint 运行时,在确定哪些文件要检测之前,它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件,当遍历目录时,将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用,所以,不是当前工作目录下的 .eslintignore 文件将不会被用到。

.eslintrc.js

eslint用来规范自己的代码风格,减少程序出错的概率
.eslintrc.js就是一种eslint检测规范的配置文件

ESLint 支持几种格式的配置文件,如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON -使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。
Deprecated -使用 .eslintrc,可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。

.gitignore

提交到github远程库时被忽略文件或目录的配置文件

.postcssrc.js

PostCSS也是规范代码风格,可以帮助我们提高CSS代码质量。
.postcssrc.js就是检查css代码规范的配置文件

index.html

主页

package-lock.json

package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新。类似与yarn.lock

package.json

包管理工具通过package.json管理依赖包,package.json是一个包管理的配置文件

README.md

项目的说明文件

. yarn.lock

类似于package-lock.json

重点了解一下src目录

main.js

// node_modules中引入vue模块。
import Vue from 'vue'
// 当前目录的app.vue文件
import App from './App'
// 引入router.js
import router from './router' // 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false // eslint规范,/* eslint-disable no-new */不写就蹦了,为什么?
// 因为js中new 一个对象的时候,规范的写法是赋值给某个变量,这里设置eslint-disable,就是为了检测时跳过接下来这行代码
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
//根组件的模板
template: '<App/>',
//子组件
components: { App }
})

App.vue

这是一个单文件组件,而且是根组件,是在main.js中渲染的模板和子组件

它和之前的写法不一样,但是道理是一样的,之前的<div id="app"></div>作为根组件模板是直接写在html中,现在是通过模板的形式渲染到页面

template:
模板中的根元素只能有一个,它会被渲染成组件的根元素,

script:
组件的数据,方法,通过export.default导出

style:
css部分

router.js

路由配置

路由肯定是要导出的

export default new Router({
routes: []
})

开始配置路由:

export default new Router({
routes: [
{
path: '/home',
name: 'home'
// 它的组件是home组件
component: home
},
{
path: '/about',
name: 'about',
// 它的组件是about
component: about
}
]
})

这里用到了Router构造函数,还有各自的组件,所以不要忘了在首行导入 vue 和 vue-router 和组件

// 引入vue
import Vue from 'vue'
// 导入路由
import Router from 'vue-router'
// 导入模板
import home from '@/components/home'
import about from '@/components/about'

路由会被main.js引入

原文地址:https://segmentfault.com/a/1190000012781652

vue-cli#2.0项目结构分析的更多相关文章

  1. VUE CLI 3.0 项目引入 Mock.js

    mockjs 官网:http://mockjs.com/ 之前没有使用过 mockjs 的同学,请参考官网文档,数据生成规则和方法的调用都有详细说明. 一.通过npm安装依赖包 1. 进入到项目目录, ...

  2. VUE CLI 3.0 项目引入 ElementUI

    ElementUI 官网: http://element-cn.eleme.io/#/zh-CN/component/installation 一.通过npm安装依赖包 1. 进入到项目目录,执行指令 ...

  3. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  4. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  5. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  6. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  7. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  8. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

  9. vue cli 4.0.5 的使用

    vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...

  10. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

随机推荐

  1. Kz.layedit-layui.layedit富文本编辑器拓展

    项目介绍 首先欢迎使用 Kz.layedit!本项目基于layui.layedit富文本编辑器,在其之上拓展而来. 新增功能 html源码模式.插入hr水平线.段落格式.字体颜色.字体背景色.批量上传 ...

  2. HDU 2049 不容易系列之(4)——考新郎( 错排 )

    链接:传送门 思路:错排水题,从N个人中选出M个人进行错排,即 C(n,m)*d[m] 补充:组合数C(n,m)能用double计算吗?第二部分有解释 Part 1. 分别求出来组合数的分子和分母然后 ...

  3. tensorflow之tf.slice()

    转载:https://www.jianshu.com/p/71e6ef6c121b https://www.cnblogs.com/chamie/p/11073363.html def slice(i ...

  4. u-boot for tiny210 ver1.0(by liukun321咕唧咕唧)

     新版本下载: 下面的链接提供了较新版本的源码 ver4.0源码下载:u-boot for tiny210 ver4.0 ver3.1源码下载: u-boot for tiny210 ver3.1 v ...

  5. 紫书 例题8-3 UVa 1152(中途相遇法)

    这道题要逆向思维, 就是求出答案的一部分, 然后反过去去寻找答案存不存在. 其实很多其他题都用了这道题目的方法, 自己以前都没有发现, 这道题专门考这个方法.这个方法可以没有一直往下求, 可以省去很多 ...

  6. 初识单点登录及JWT实现

    单点登录 多系统,单一位置登录,实现多系统同时登录的一种技术 (三方登录:某系统使用其他系统的用户,实现本系统登录的方式.如微信登录.支付宝登录) 单点登录一般是用于互相授信的系统,实现单一位置登录, ...

  7. iText操作pdf(生成,导入图片等)

    生成pdf有很多种方法,用pdfbox也很方便,今天我要写的是用iText 主要在pom.xml中配置的jar包如下 <dependency> <groupId>com.low ...

  8. 2015 Multi-University Training Contest 7 hdu 5373 The shortest problem

    The shortest problem Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  9. Mysql怎么样避免全表扫描,sql查询优化

    对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引: 尝试下面的技巧以避免优化器错选了表扫描: 使用ANALYZE TABLE tbl_name为扫 ...

  10. iOS 图像处理-调整图像亮度

    - (UIImage*) getBrighterImage:(UIImage *)originalImage { UIImage *brighterImage; CIContext *context ...