問題一:構(gòu)建的 vue-cli 工程都到了哪些技術(shù),它們的作用分別是什么钮科?
1挖帘、vue.js:vue-cli工程的核心鸥鹉,主要特點是?雙向數(shù)據(jù)綁定?和?組件系統(tǒng)惧盹。
2纠屋、vue-router:vue官方推薦使用的路由框架忧陪。
3厘托、vuex:專為 Vue.js 應用項目開發(fā)的狀態(tài)管理器食呻,主要用于維護vue組件間共用的一些 變量 和 方法流炕。
4、axios( 或者 fetch 仅胞、ajax ):用于發(fā)起 GET 每辟、或 POST 等 http請求,基于 Promise 設計干旧。
5渠欺、vux等:一個專為vue設計的移動端UI組件庫。
6椎眯、創(chuàng)建一個emit.js文件峻堰,用于vue事件機制的管理。
7盅视、webpack:模塊加載和vue-cli工程打包器捐名。
問題二:vue-cli 工程常用的 npm 命令有哪些?
下載 node_modules 資源包的命令:
npm install
啟動 vue-cli 開發(fā)環(huán)境的 npm命令:
npm run dev
vue-cli 生成 生產(chǎn)環(huán)境部署資源 的 npm命令:
npm run build
用于查看 vue-cli 生產(chǎn)環(huán)境部署資源文件大小的 npm命令:
npm run build--report
vue-cli目錄結(jié)構(gòu):
vue-cli目錄解析:
build 文件夾:用于存放 webpack 相關(guān)配置和腳本闹击。開發(fā)中僅 偶爾使用 到此文件夾下?webpack.base.conf.js?用于配置 less镶蹋、sass等css預編譯庫,或者配置一下 UI 庫赏半。
config 文件夾:主要存放配置文件贺归,用于區(qū)分開發(fā)環(huán)境、線上環(huán)境的不同断箫。 常用到此文件夾下?config.js?配置開發(fā)環(huán)境的 端口號拂酣、是否開啟熱加載 或者 設置生產(chǎn)環(huán)境的靜態(tài)資源相對路徑、是否開啟gzip壓縮仲义、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等婶熬。
dist 文件夾:默認 npm run build 命令打包生成的靜態(tài)資源文件,用于生產(chǎn)部署埃撵。
node_modules:存放npm命令下載的開發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包赵颅。
src: 存放項目源碼及需要引用的資源文件。
src下assets:存放項目中需要用到的資源文件暂刘,css饺谬、js、images等谣拣。
src下componets:存放vue開發(fā)中一些公共組件:header.vue募寨、footer.vue等族展。
src下emit:自己配置的vue集中式事件管理機制。
src下router:vue-router vue路由的配置文件拔鹰。
src下service:自己配置的vue請求后臺接口方法苛谷。
src下page:存在vue頁面組件的文件夾。
src下util:存放vue開發(fā)過程中一些公共的.js方法格郁。
src下vuex:存放 vuex 為vue專門開發(fā)的狀態(tài)管理器。
src下app.vue:使用標簽<route-view></router-view>渲染整個工程的.vue組件独悴。
src下main.js:vue-cli工程的入口文件例书。
index.html:設置項目的一些meta頭信息和提供<div id="app"></div>用于掛載 vue 節(jié)點。
package.json:用于 node_modules資源部 和 啟動刻炒、打包項目的 npm 命令管理决采。
問題二:config文件夾 下 index.js 的對于工程 開發(fā)環(huán)境 和 生產(chǎn)環(huán)境 的配置
build?對象下 對于 生產(chǎn)環(huán)境 的配置:
index:配置打包后入口.html文件的名稱以及文件夾名稱
assetsRoot:配置打包后生成的文件名稱和路徑
assetsPublicPath:配置 打包后 .html 引用靜態(tài)資源的路徑,一般要設置成 "./"
productionGzip:是否開發(fā) gzip 壓縮坟奥,以提升加載速度
dev?對象下 對于 開發(fā)環(huán)境 的配置:
port:設置端口號
autoOpenBrowser:啟動工程時树瞭,自動打開瀏覽器
proxyTable:vue設置的代理,用以解決 跨域 問題
問題三:請你詳細介紹一些 package.json 里面的配置
常用對象解析:
scripts:npm run xxx 命令調(diào)用node執(zhí)行的 .js 文件
dependencies:生產(chǎn)環(huán)境依賴包的名稱和版本號爱谁,即這些 依賴包 都會打包進 生產(chǎn)環(huán)境的JS文件里面
devDependencies:開發(fā)環(huán)境依賴包的名稱和版本號晒喷,即這些 依賴包 只用于 代碼開發(fā) 的時候,不會打包進 生產(chǎn)環(huán)境js文件 里面访敌。