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

2019-11-19 18:10:28

字體：大中小

來源：轉載

供稿：網友

說明：

我們項目現在用的是：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組件，這樣我們就只需要去關注每個組件的功能完善。

這里寫圖片描述