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入门教程(8) Location地址对象
Jan 31 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
js常用代码段整理
Nov 30 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
Date对象格式化函数代码
2010/07/17 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python生成器generator用法示例
2018/08/10 Python
浅谈Django的缓存机制
2018/08/23 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
高三地理教学反思
2014/01/11 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
法院授权委托书范文
2014/08/02 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
杨善洲观后感
2015/06/04 职场文书
小学中队长竞选稿
2015/11/20 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis