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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 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中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
教学实验楼管理制度
2014/02/01 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年保送生自荐信
2015/03/24 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书