摘要:項目結構為我們搭建開發所需要的環境目錄結構及主要功能項目構建相關代碼生產環境構建代碼檢查等版本熱重載相關構建本地服務器構建工具相關基礎配置開發環境配置生產環境配置項目開發環境配置開發環境
Vue-cli 項目結構 vue-cli
為我們搭建開發所需要的環境
目錄結構及主要功能 |-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件,加載各種公共組件
|-- static // 靜態文件,比如一些圖片,json數據等
| |-- data // 群聊分析得到的數據用于數據可視化
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
重要文件解釋:
一、package.json
package.json文件是項目根目錄下的一個文件,定義該項目開發所需要的各種模塊以及一些項目配置信息.在項目根目錄下運行npm i可以安裝所需依賴包.
里面的scripts字段,定義了可以快速使用npm命令代替繁瑣的命令執行文件,其中npm run dev相當于執行 node build/dev-server.js 也就是開啟了一個node寫的開發行建議服務器,是相關命令的縮寫.
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
}
dependencies字段:項目運行所依賴的模塊;
devDependencies字段: 指定項目開發所依賴的模塊;
dev-server.js
// 檢查 Node 和 npm 版本
require("./check-versions")()
// 獲取 config/index.js 的默認配置
var config = require("../config")
// 如果 Node 的環境無法判斷當前是 dev / product 環境
// 使用 config.dev.env.NODE_ENV 作為當前的環境
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
// 使用 NodeJS 自帶的文件路徑工具
var path = require("path")
// 使用 express
var express = require("express")
// 使用 webpack
var webpack = require("webpack")
// 一個可以強制打開瀏覽器并跳轉到指定 url 的插件
var opn = require("opn")
// 使用 proxyTable
var proxyMiddleware = require("http-proxy-middleware")
// 使用 dev 環境的 webpack 配置
var webpackConfig = require("./webpack.dev.conf")
// default port where dev server listens for incoming traffic
// 如果沒有指定運行端口,使用 config.dev.port 作為運行端口
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
// 使用 config.dev.proxyTable 的配置作為 proxyTable 的代理配置
var proxyTable = config.dev.proxyTable
// 使用 express 啟動一個服務
var app = express()
// 啟動 webpack 進行編譯
var compiler = webpack(webpackConfig)
// 啟動 webpack-dev-middleware,將 編譯后的文件暫存到內存中
var devMiddleware = require("webpack-dev-middleware")(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
// 啟動 webpack-hot-middleware,也就是我們常說的 Hot-reload
var hotMiddleware = require("webpack-hot-middleware")(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin("compilation", function (compilation) {
compilation.plugin("html-webpack-plugin-after-emit", function (data, cb) {
hotMiddleware.publish({ action: "reload" })
cb()
})
})
// proxy api requests
// 將 proxyTable 中的請求配置掛在到啟動的 express 服務上
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === "string") {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
})
// handle fallback for HTML5 history API
// 使用 connect-history-api-fallback 匹配資源,如果不匹配就可以重定向到指定地址
app.use(require("connect-history-api-fallback")())
// serve webpack bundle output
// 將暫存到內存中的 webpack 編譯后的文件掛在到 express 服務上
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
// 將 Hot-reload 掛在到 express 服務上
app.use(hotMiddleware)
// serve pure static assets
// 拼接 static 文件夾的靜態資源路徑
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 為靜態資源提供響應服務
app.use(staticPath, express.static("./static"))
// 讓我們這個 express 服務監聽 port 的請求,并且將此服務作為 dev-server.js 的接口暴露
module.exports = app.listen(port, function (err) {
if (err) {
console.log(err)
return
}
var uri = "http://localhost:" + port
console.log("Listening at " + uri + "
")
// when env is testing, don"t need open it
// 如果不是測試環境,自動打開瀏覽器并跳到我們的開發地址
if (process.env.NODE_ENV !== "testing") {
opn(uri)
}
})
webpack.base.config.js : webpack的基礎配置文件
.babelrc : Babel解釋器的配置文件,存放在根目錄下、Babel是一個轉碼器,項目里需要用它將ES6代碼轉為ES5代碼.
具體代碼詳解請翻到頁面底部的引用地址...
.editorconfig : 該文件定義項目的編碼規范,編譯器的行為會與.editorconfig文件中定義的一致,并且其優先級比編譯器自身的設置要高,這在多人合作開發項目時十分有用而且必要。
npm run build 命令
將寫好的網頁放到服務器上,運行該命令后,vue-cli會自動將項目打包,生成dist文件夾,這個文件夾就是我們要傳到服務器上的文件.
main.js是整個項目的入口文件,位于src文件夾下
Vue.config.productionTip = false //生產環境提示,這里設置成了false
這里面最陌生的文件就是這句話,其他都是vue.js和ES6的寫法,不多說.
還有就是通過 import App from "./App" 引入了App組件.
app.vue文件
標簽里面是html結構,
標簽為js內容
為css內容,其中scoped聲明樣式只在模板中起作用.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/51518.html
摘要:初來乍到,請多多關照也許這是第一套基于搭建基于的項目教程。年月初升級到了新的版本版,跟版本項目結構發生了很大的改變,目錄結構更簡潔更科學。并且可以選配,在此之前配置略麻煩,是的超級,靜態類型,便捷的注解,使前端代碼優雅。 前言 hello~ 大家好。 初來乍到,請多多關照 ?(??????)??也許這是第一套基于 vue-cli 3.x 搭建基于 typescript 的vue項目教程...
摘要:記使用方式和之前版本的差異的使用下載和安裝項目生成的目錄結構以上,目前版本的使用下載和安裝項目生成的目錄結構新的目錄結構,隱藏了配置文件,封裝了細節對比個區別區別下載包的包命變化。貌似是之前的版本有點問題 記vue-cli@3.0使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項目 cnpm i -g vue-cli#2.9.3 vue init webpa...
摘要:主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代,和作為前端框架已經呈現出了三國鼎立的局面。 主要作用:目錄結構、本地調試、代碼部署、熱加載、單元測試 在如今前端技術飛速發展的時代,angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue,小生表示可以理解,如果作為中國的前端猿不知道 vue,...
摘要:主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代,和作為前端框架已經呈現出了三國鼎立的局面。 主要作用:目錄結構、本地調試、代碼部署、熱加載、單元測試 在如今前端技術飛速發展的時代,angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue,小生表示可以理解,如果作為中國的前端猿不知道 vue,...
摘要:主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代,和作為前端框架已經呈現出了三國鼎立的局面。 主要作用:目錄結構、本地調試、代碼部署、熱加載、單元測試 在如今前端技術飛速發展的時代,angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue,小生表示可以理解,如果作為中國的前端猿不知道 vue,...
閱讀 1832·2021-09-22 15:54
閱讀 2941·2021-09-01 10:42
閱讀 3456·2019-08-30 15:56
閱讀 1452·2019-08-29 18:46
閱讀 2482·2019-08-29 10:57
閱讀 2722·2019-08-28 17:57
閱讀 3673·2019-08-23 18:14
閱讀 848·2019-08-23 17:03