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

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

vue 项目：文件夹 结构 、配置详解相关推荐

  1. vue 总结一项目建立及文件夹结构配置

    项目配置 首先,按官方指引,使用 vue-cli 搭建 vue 的项目,在项目里按照上面的文档尝试修改,加深理解: # 安装依赖库,建议指定 vue 和 element 版本,避免版本升级带来意料之外 ...

  2. Android Studio项目中Build.gradlle配置详解

    许多对gradlle不了解的宝宝们总是会在配置的过程中遇到一系列的问题,大体都是对gradlle不够了解.所以在此详细说明gradlle中每一项的用处,如下 1. apply plugin: 'com ...

  3. mysql phpmyadmin 文件夹_PHPMyadmin 配置文件详解(配置)

    非常适合对数据库操作命令不熟悉的数据库管理者,下面我就说下怎么安装该工具: 1.先到网上下载phpmyadmin,再解压到可以访问的web目录下(如果是虚拟空间,可以解压后通过ftp等上传到web目录 ...

  4. vue单文件props写法_详解Vue 单文件组件的三种写法

    详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...

  5. 理解Git的设计思想，详解git文件夹，以及详解add、commit、push，fetch、pull、merge指令

    在项目目录执行git init,此目录将纳入git管理,git将会自动生成.git文件夹,用以记录git配置(.git/config)和版本信息(commit-id)和文件集合.下面是.git文件夹的 ...

  6. 操作系统：电脑系统盘常见文件夹的功能详解

    目录 一.C盘根目录常见文件夹 二.隐藏文件夹 相信很多电脑小白对于系统C盘每个文件夹的功能不是很清楚,今天小编给大家介绍一下电脑系统盘文件的功能详解,希望对大家能有所帮助! 一.C盘根目录常见文件夹 ...

  7. Vue项目打包后dist文件目录详解

    1. css文件夹 css文件是项目要用到的css文件,当你做webpack打包的时候,会把所有的css样式打包到这里 2.  js文件夹 app.js放的是项目中各个页面的逻辑代码,将格式进行了压缩 ...

  8. windows服务器文件夹权限设置详解,windows服务器如何设置文件夹权限

    windows服务器如何设置文件夹权限 内容精选 换一换 实际业务场景下,您可能会需要将文件临时分享给其他人或者将文件永久共享给其他人.临时分享:通过文件的临时URL直接将其分享给其他用户.文件分享强 ...

  9. gitignore忽略文件夹_原创 | 详解gitignore的使用方法，让你尽情使用git add .

    点击上方蓝字,关注并星标,和我一起学技术. 大家好,欢迎来到周一git专题. 今天和大家聊聊gitignore的作用,其实如果你英文还可以的话,你应该已经基本上猜到它的作用了.ignore在英文当中的 ...

  10. 手机中geetest是什么文件_安卓手机系统中各类英文文件夹的含义详解，不知道的尽快熟知！...

    说到手机,不管是安卓版还是苹果版的手机,总是会有很多地方让人头疼,不是因为不好用,而是因为不认识,完全不知道干嘛用的.看来使用手机,还需要将自己的英文学好,这样才不会导致自己的手机内存不够用和误删除一 ...

最新文章

  1. 使用B::Deparse模块对perl代码反汇编
  2. 学习Java笔记(一)
  3. 51nod1134最长递增子序列(dp)
  4. python去干扰线_GitHub - Guardiant/VerifyCode: 验证码去干扰线识别
  5. C++ 判断某一个数是否为质数
  6. SpringBoot项目在启动时出现了Cannot determine embedded database driver class for database type NONE 错误
  7. vs2002 vs2003 可能存在的问题以及解决办法！
  8. 使用DataTables合并行
  9. 新代系统PLC编程软件 新代PLC编程软件中文版梯形图
  10. 白帽子讲web安全笔记
  11. python持久层框架_python网络爬虫——scrapy框架持久化存储
  12. Gmail 实验室产品经理 Todd Jackson 访谈录
  13. 爬取双色球的历史记录
  14. 微信小程序动态生成二维码
  15. Vue.js 2.5新特性介绍
  16. 旅行：拉萨“艳遇墙”：最容易发生艳遇的地方！
  17. 学堂在线计算机辅助设计答案,计算机辅助设计（PROE)_习题集（含答案）.doc
  18. 用代码制作小游戏：简单制作给孩子幸福童年
  19. 军校空军士官计算机专业,军校微媒矩阵 | 军改新信息： 详解空工大航空机务士官学校...
  20. 浅谈信息安全与ISO27001体系认证的紧密性

热门文章

  1. SharePoint 2013异常信息的查看
  2. Java--对象内存布局
  3. 深入探究JVM | klass-oop对象模型研究
  4. ROS入门_1.10 理解ROS服务和参数
  5. java光标位置无效_java - java.sql.SQLException：无效的光标位置 - 堆栈内存溢出
  6. sap 订单状态修改时间_SAP中对于获取订单的状态
  7. Python 数据分析三剑客之 NumPy（六）：矩阵 / 线性代数库与 IO 操作
  8. navcat定时备份mysql_Linux实现MYSQl数据库的定时备份
  9. 帆软单点登录_电子表格FineReport教程：[20]CAS单点登录
  10. 【机器学习】 - 关于Keras的深入理解