Vue.js系列之项目结构说明(2)
说明：
我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。
本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。
1.Vue.js系列之项目搭建（1）
简单介绍目录结构
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)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Vuejs第十篇之vuejs父子组件通信
本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a
-
Vue.js系列之项目搭建(1)
说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误. 今天要讲讲Vue2.0了.最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩
-
Vue.js系列之vue-router(上)(3)
说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 2.Vue.js系列之项目结构说明(2) 概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较
-
Vuejs第九篇之组件作用域及props数据传递实例详解
本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc
-
VUEJS实战之修复错误并且美化时间（2）
前言 在上一章中,我们通过基础的搭建,成功的渲染了列表页面.但是,其中的问题是很多的.这一章,我们来解决这些问题. 使用 v-bind 绑定数据. 上一章的代码,我们渲染出来了页面.但是如果打开了控制台,你会发现有错误.如下图所示: 这是因为页面进来的时候,会先执行我们的html代码,而此时,我们的vue还没开始工作.而我们的代码如下: <li v-for="info in data"> <i class="user_ico"> <im
-
Vuejs第七篇之Vuejs过渡动画案例全面解析
本篇资料是小编结合官方文档整理的一套更全面细致的说明,代码更多更全. 本篇资料来于官方文档: http://cn.vuejs.org/guide/transitions.html 下面看下过渡动画相关知识: ①过渡动画的定义: 简单来说,就是当模块消失.出现时,会以什么样的形式消失和出现: 如果要使用过渡动画,则在标签里加入属性: transition="过渡动画名" 例如: <div class="box" v-if="box_1" tr
-
Vue.js系列之项目结构说明(2)
说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是v
-
vue.js系列中的vue-fontawesome使用
折腾前言 目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-awesome锲而不舍,通过 github 了解到早有大牛搞出了 vue-awesome,因此就开始折腾了-- 废话不多说,开搞! 准备工作 这个是作者的 github 地址:飞机 为了演示完整步骤,用脚手架新建个项目 正在创建中- 趁此闲话几句 这种方式使用有个好处就是,你可以自己自定义任何图标
-
手把手教你使用Django + Vue.js 快速构建项目
目录 1. 前言 2. 环境准备 3. 创建 Django 项目 4. 创建 Vue.js 前端项目 5. 解决跨域问题 6. 整合 Django 和 Vue.js 前端 1. 前言 本篇将基于Django + Vue.js,手把手教大家快速的实现一个前后端分离的Web项目. 2. 环境准备 Python 3.6.1 Mysql 5.7.23 Pycharm (专业版) Node 3. 创建 Django 项目 创建完成后,目录结构如下所示 使用 Navicat 工具创建数据库 DjangoVu
-
Node.js与Sails ~项目结构与Mvc实现及日志机制
本文首先从sails的安装讲起接下来介绍node.js与Sails的日志机制,小伙伴们已经迫不及待要看下文了吧,好吧. Sails是一个Node.js的中间件架构,帮助我们很方便的构建WEB应用程序,网址:http://www.sailsjs.org/,它主要是在Express框架的基础上发展起来的,扩展了新的功能组件,下面我们来看一下安装方法 一 安装Sails npm -g install sails 二 建立一个Sails的项目 sails new testProject 三 启动项目 c
-
vue.js实例todoList项目
新建组件todoList.vue,在App.vue中引入 import TodoList from "./components/todoList"; export default { name: 'app', components: { TodoList } } <template> <div id="app"> <h1>TO DO LIST !</h1> <todo-list></todo-list
-
vue初尝试--项目结构(推荐)
新建一个项目之后,我们来看一下项目的目录结构 几个主要文件的内容 index.html文件(入口文件,系统进入之后先进入index.html) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
-
vue.js项目打包上线的图文教程
最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的.这里我简单的列出这个过程: 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里
-
vue.js项目打包上线全流程
目录 vue.js项目打包上线 这里我简单的列出这个过程 vue.js打包之后遇到的坑 打包之后没有被渲染出来 路由(router)mode:'history',导致页面不能渲染问题 vue.js项目打包上线 最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态