Vue.js系列之項目結構說明(2)

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

這篇文章主要介紹了Vue.js系列之項目結構說明(2)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

說明：

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

如果大家在實踐的過程中與本文所說的內容有較大區(qū)別的話看看是不是版本問題。

本文是一系列文章，在我對Vue有了更深刻的理解認識之后會對文章及時進行修改或更正。歡迎大家批評指出錯誤。以下是已完成的文章列表。

1.Vue.js系列之項目搭建（1）

這里寫圖片描述

簡單介紹目錄結構

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

config是vue項目的基本配置文件

node_modules是項目中安裝的依賴模塊

src源碼文件夾，基本上文件都應該放在這里。

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

—components這里放的都是各個組件文件

—App.vue App.vue組件

—main.js入口文件

static生成好的文件會放在這個目錄下。

test測試文件夾，測試都寫在這里

.babelrc babel編譯參數(shù)，vue開發(fā)需要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個重要的節(jié)點我說明一下：

dependencies：項目發(fā)布時的依賴

devDependencies：項目開發(fā)時的依賴

scripts：編譯項目的一些命令

2. .babelrc文件

.babelrc文件定義了ES6的轉碼規(guī)則，基于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

這里是入口文件，可以引入一些插件或靜態(tài)資源，當然引入之前要先安裝了該插件，在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組件，這樣我們就只需要去關注每個組件的功能完善。

這里寫圖片描述