Vue.js系列之項(xiàng)目結(jié)構(gòu)說(shuō)明(2)

更新時(shí)間：2017年01月03日 09:26:14 作者：向朔1992

這篇文章主要介紹了Vue.js系列之項(xiàng)目結(jié)構(gòu)說(shuō)明(2)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

說(shuō)明：

我們項(xiàng)目現(xiàn)在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在實(shí)踐的過(guò)程中與本文所說(shuō)的內(nèi)容有較大區(qū)別的話看看是不是版本問(wèn)題。

本文是一系列文章，在我對(duì)Vue有了更深刻的理解認(rèn)識(shí)之后會(huì)對(duì)文章及時(shí)進(jìn)行修改或更正。歡迎大家批評(píng)指出錯(cuò)誤。以下是已完成的文章列表。

1.Vue.js系列之項(xiàng)目搭建（1）

這里寫(xiě)圖片描述

簡(jiǎn)單介紹目錄結(jié)構(gòu)

build目錄是一些webpack的文件，配置參數(shù)什么的，一般不用動(dòng)

config是vue項(xiàng)目的基本配置文件

node_modules是項(xiàng)目中安裝的依賴(lài)模塊

src源碼文件夾，基本上文件都應(yīng)該放在這里。

—assets 資源文件夾，里面放一些靜態(tài)資源

—components這里放的都是各個(gè)組件文件

—App.vue App.vue組件

—main.js入口文件

static生成好的文件會(huì)放在這個(gè)目錄下。

test測(cè)試文件夾，測(cè)試都寫(xiě)在這里

.babelrc babel編譯參數(shù)，vue開(kāi)發(fā)需要babel編譯

.editorconfig 看名字是編輯器配置文件，不曉得是哪款編輯器，沒(méi)有使用過(guò)。

.gitignore 用來(lái)過(guò)濾一些版本控制的文件，比如node_modules文件夾

index.html 主頁(yè)

package.json 項(xiàng)目文件，記載著一些命令和依賴(lài)還有簡(jiǎn)要的項(xiàng)目描述信息

README.md 介紹自己這個(gè)項(xiàng)目的，想怎么寫(xiě)怎么寫(xiě)。不會(huì)寫(xiě)就參照github上star多的項(xiàng)目，看人家怎么寫(xiě)的

詳細(xì)介紹幾個(gè)文件

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文件是項(xiàng)目配置文件，除了項(xiàng)目的一些基本信息外，有3個(gè)重要的節(jié)點(diǎn)我說(shuō)明一下：

dependencies：項(xiàng)目發(fā)布時(shí)的依賴(lài)

devDependencies：項(xiàng)目開(kāi)發(fā)時(shí)的依賴(lài)

scripts：編譯項(xiàng)目的一些命令

2. .babelrc文件

.babelrc文件定義了ES6的轉(zhuǎn)碼規(guī)則，基于ES6編寫(xiě)的js代碼在編譯時(shí)都會(huì)被babel轉(zhuǎn)碼器轉(zhuǎn)換為ES5代碼。

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

3.index.html

主頁(yè)我們可以像平時(shí)普通的html文件一樣引入文件和書(shū)寫(xiě)基本信息，添加meta標(biāo)簽等。

<!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>華企商學(xué)院</title>
 </head>
 <body>
  <div id="app"></div>
 </body>
</html>

4.main.js

這里是入口文件，可以引入一些插件或靜態(tài)資源，當(dāng)然引入之前要先安裝了該插件，在package.json文件中有記錄。

/*引入Vue框架*/
import Vue from 'vue'
/*引入資源請(qǐng)求插件*/
import VueResource from 'vue-resource'
/*重置樣式*/
import "assets/css/base.css"
/*基本JS*/
import "assets/js/common.js"
/*引入路由設(shè)置*/
import "./routers.js"
/*使用VueResource插件*/
Vue.use(VueResource)

5.App.vue

這是一個(gè)標(biāo)準(zhǔn)的vue組件，包含三個(gè)部分，一個(gè)是模板，一個(gè)是script，一個(gè)是樣式，這里需要了解vue的基礎(chǔ)。

<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>

總結(jié)說(shuō)明

我不是隨便拿官方的demo放在這里，我是想說(shuō)明，在webpack的配置文件里，設(shè)置了main.js是入口文件，我們的項(xiàng)目默認(rèn)訪問(wèn)index.html，這個(gè)文件里面<div id="app"></div>和App.vue組件里面的容器完美的重合了，也就是把組件掛載到了index頁(yè)面，然后我們只需要去建設(shè)其他組件就好了，在App組件中我們也可以引入，注冊(cè)，應(yīng)用其他組件，后面我會(huì)介紹如何通過(guò)路由將其他組件渲染在App組件，這樣我們就只需要去關(guān)注每個(gè)組件的功能完善。

這里寫(xiě)圖片描述

以上所述是小編給大家介紹的Vue.js系列之項(xiàng)目結(jié)構(gòu)說(shuō)明(2)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: