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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
JavaScript 字符编码规则
May 04 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 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
用PHP编写PDF文档生成器
2006/10/09 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
python中ASCII码和字符的转换方法
2018/07/09 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python做反被爬保护的方法
2019/07/01 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
行政专员岗位职责
2014/01/02 职场文书
怎么写自荐书范文
2014/02/12 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
大学生活自我评价
2014/04/09 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014年采购员工作总结
2014/11/18 职场文书