Vue.js系列之项目结构说明(2)


Posted in Javascript onJanuary 03, 2017

说明:

我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。

本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。

Vue.js系列之项目结构说明(2)

简单介绍目录结构

build目录是一些webpack的文件,配置参数什么的,一般不用动

config是vue项目的基本配置文件

node_modules是项目中安装的依赖模块

src源码文件夹,基本上文件都应该放在这里。

—assets 资源文件夹,里面放一些静态资源

—components这里放的都是各个组件文件

—App.vue App.vue组件

—main.js入口文件

static生成好的文件会放在这个目录下。

test测试文件夹,测试都写在这里

.babelrc babel编译参数,vue开发需要babel编译

.editorconfig 看名字是编辑器配置文件,不晓得是哪款编辑器,没有使用过。

.gitignore 用来过滤一些版本控制的文件,比如node_modules文件夹

index.html 主页

package.json 项目文件,记载着一些命令和依赖还有简要的项目描述信息

README.md 介绍自己这个项目的,想怎么写怎么写。不会写就参照github上star多的项目,看人家怎么写的

详细介绍几个文件

1.package.json

{
 "name": "demo",
 "version": "1.0.0",
 "description": "A Vue.js project",
 "author": "Luke.deng",
 "private": true,
 "scripts": {
  "dev": "node build/dev-server.js",
  "build": "node build/build.js",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run e2e"
 },
 "dependencies": {
  "vue": "^2.1.0"
 },
 "devDependencies": {
  "autoprefixer": "^6.4.0",
  "babel-core": "^6.0.0",
  "babel-loader": "^6.0.0",
  "babel-plugin-transform-runtime": "^6.0.0",
  "babel-preset-es2015": "^6.0.0",
  "babel-preset-stage-2": "^6.0.0",
  "babel-register": "^6.0.0",
  "chalk": "^1.1.3",
  "connect-history-api-fallback": "^1.1.0",
  "css-loader": "^0.25.0",
  "eventsource-polyfill": "^0.9.6",
  "express": "^4.13.3",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "function-bind": "^1.0.2",
  "html-webpack-plugin": "^2.8.1",
  "http-proxy-middleware": "^0.17.2",
  "json-loader": "^0.5.4",
  "chromedriver": "^2.21.2",
  "cross-spawn": "^4.0.2",
  "nightwatch": "^0.9.8",
  "selenium-server": "2.53.1",
  "semver": "^5.3.0",
  "opn": "^4.0.2",
  "ora": "^0.3.0",
  "shelljs": "^0.7.4",
  "url-loader": "^0.5.7",
  "vue-loader": "^10.0.0",
  "vue-style-loader": "^1.0.0",
  "vue-template-compiler": "^2.1.0",
  "webpack": "^1.13.2",
  "webpack-dev-middleware": "^1.8.3",
  "webpack-hot-middleware": "^2.12.2",
  "webpack-merge": "^0.14.1"
 },
 "engines": {
  "node": ">= 4.0.0",
  "npm": ">= 3.0.0"
 }
}

package.json文件是项目配置文件,除了项目的一些基本信息外,有3个重要的节点我说明一下:

dependencies:项目发布时的依赖

devDependencies:项目开发时的依赖

scripts:编译项目的一些命令

2. .babelrc文件

.babelrc文件定义了ES6的转码规则,基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。

{
 "presets": ["es2015", "stage-2"],
 "plugins": ["transform-runtime"],
 "comments": false
}

3.index.html

主页我们可以像平时普通的html文件一样引入文件和书写基本信息,添加meta标签等。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>华企商学院</title>
 </head>
 <body>
  <div id="app"></div>
 </body>
</html>

4.main.js

这里是入口文件,可以引入一些插件或静态资源,当然引入之前要先安装了该插件,在package.json文件中有记录。

/*引入Vue框架*/
import Vue from 'vue'
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*重置样式*/
import "assets/css/base.css"
/*基本JS*/
import "assets/js/common.js"
/*引入路由设置*/
import "./routers.js"
/*使用VueResource插件*/
Vue.use(VueResource)

5.App.vue

这是一个标准的vue组件,包含三个部分,一个是模板,一个是script,一个是样式,这里需要了解vue的基础。

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <hello></hello>
 </div>
</template>
<script>
import Hello from './components/Hello'
export default {
 name: 'app',
 components: {
  Hello
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

总结说明

我不是随便拿官方的demo放在这里,我是想说明,在webpack的配置文件里,设置了main.js是入口文件,我们的项目默认访问index.html,这个文件里面<div id="app"></div>和App.vue组件里面的容器完美的重合了,也就是把组件挂载到了index页面,然后我们只需要去建设其他组件就好了,在App组件中我们也可以引入,注册,应用其他组件,后面我会介绍如何通过路由将其他组件渲染在App组件,这样我们就只需要去关注每个组件的功能完善。

Vue.js系列之项目结构说明(2)

以上所述是小编给大家介绍的Vue.js系列之项目结构说明(2),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
javascript history对象详解
Feb 09 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
node获取客户端ip功能简单示例
Aug 24 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
Vue.js系列之项目搭建(1)
Jan 03 #Javascript
jquery实现下拉框多选方法介绍
Jan 03 #Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 #Javascript
详解JavaScript常量定义
Jan 03 #Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 #Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 #Javascript
一个例子轻松学会Vue.js
Jan 02 #Javascript
You might like
短波问题解答
2021/02/28 无线电
php调用mysql存储过程
2007/02/14 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php随机输出名人名言的代码
2012/10/07 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python 闭包的使用方法
2017/09/07 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python实现电子产品商店
2019/02/26 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
学生自我鉴定
2013/12/18 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
SpringBoot生成License的实现示例
2021/06/16 Java/Android