vue-cli工程基本介紹

  • 轉(zhuǎn)眼學(xué)習(xí)過半星爪,我雖認(rèn)識到學(xué)習(xí)是個(gè)很好的開始忠荞,但是這不能改變我目前依舊還沒入門的事實(shí)畸悬,大多數(shù)人都可能感到不自信,沒有信心能成為一名合格的工程師灾部,我能干什么我會(huì)什么的問題依舊得不到解決康铭,缺少理論的支撐,于是決定痛苦的惡補(bǔ)理論知識赌髓,希望和大家一起學(xué)習(xí)从藤,早日找到一份屬于自己滿意的前端工作,文章來自拉勾教育大前端

nodejs

  • Node.js 是一個(gè)基于Chrom V8引擎的JavaScript運(yùn)行環(huán)境
  • Node.js 使用了一個(gè)事件驅(qū)動(dòng)锁蠕、非阻塞I/O模型夷野,使其輕量又高效
  • Node.js 的包管理器npm,是全球最大的開源生態(tài)系統(tǒng)

vue-cli 工程技術(shù)

  1. vue.js: vue-cli工程的核心荣倾,主要特定是雙向數(shù)據(jù)綁定和組件系統(tǒng)
  2. vue-router: vue官方推薦使用的路由框架
  3. vuex: 專為vue.js應(yīng)用項(xiàng)目開發(fā)的狀態(tài)管理器悯搔,主要用于維護(hù)vue組件間公用的一些變量和方法
  4. axios: 用于發(fā)起GET、POST等http請求舌仍,基于Promise設(shè)計(jì)
  5. vux: 一個(gè)專為vue設(shè)計(jì)的移動(dòng)端UI組件庫
  6. 創(chuàng)建一個(gè)emit.js文件妒貌,用于vue事件機(jī)制的管理
  7. webpack: 模塊加載和vue-cli工程打包器

vue-cli工程常用的npm命令有哪些通危?

下載node_modules資源包命令

npm install

啟動(dòng)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工程中每個(gè)文件夾和文件的用處

  1. build文件夾:用于存放webpack 相關(guān)配置和腳本。開發(fā)中僅偶爾使用灌曙,到webpack.base.conf.js用于配置less菊碟、sass等css預(yù)編譯,或者配置下UI庫
  2. config文件夾:主要存放配置文件在刺,用于區(qū)分開發(fā)環(huán)境逆害、線上環(huán)境的不同。常用到此文件夾下config.js配置開發(fā)環(huán)境的端口號蚣驼、是否開啟熱加載或者設(shè)置生產(chǎn)環(huán)境的靜態(tài)資源相對路徑魄幕、是否開啟gzip壓縮、npm run build命令打包生成靜態(tài)資源名稱和路徑
  3. dist文件夾:默認(rèn)npm run build命令打包生成的靜態(tài)資源文件隙姿,用于生產(chǎn)部署
  4. node_modules: 存放npm命令下載開發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包
  5. src:存放項(xiàng)目源碼及需要用到的資源文件
  6. src/assets: 存放項(xiàng)目中需要用到的資源文件css\js\image
  7. src\components: 存放vue開發(fā)中一些公共組件:header.vue梅垄、footer.vue
  8. src/emit: 自己配置的vue集中式事件管理機(jī)制
  9. src/router: vue-router vue路由的配置文件
  10. src/service:自己配置的vue請求后臺(tái)接口方法
  11. src/page:存在vue頁面組件的文件夾
  12. src/util:存放vue開發(fā)過程中一些公共的js方法
  13. src/vuex:存放vuex為vue專門開發(fā)的狀態(tài)管理器
  14. src/app.vue: 使用標(biāo)簽<router-view>渲染整個(gè)工程的vue組件
  15. src/main.js: vue-cli工程的入口文件
  16. index.html: 設(shè)置項(xiàng)目的一些meta信息和提供掛載vue節(jié)點(diǎn)
  17. package.json: 用于node_modules資源和啟動(dòng)、打包項(xiàng)目的npm命令管理

config文件夾下index.js對于工程開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置

  • build對象下對于生產(chǎn)環(huán)境的配置
    • index: 配置打包后入口html文件的名稱以及文件夾名稱
    • assetsRoot: 配置打包后生成的文件名稱和路徑
    • assetsPublicPath: 配置打包后html引用靜態(tài)資源路徑输玷,一般要設(shè)置成"/"
    • productionGzip: 是否開發(fā)gzip壓縮队丝,已提升加載速度
  • dev對象下對于開發(fā)環(huán)境的配置
    • port: 設(shè)置端口號
    • autoOpenBrowser: 啟動(dòng)工程時(shí),自動(dòng)打開瀏覽器
    • proxyTable: vue設(shè)置的代理欲鹏,用以解決跨域問題

package.json里面的配置

  • dependencies:生產(chǎn)環(huán)境依賴包的名稱和版本號机久,即這些依賴包都會(huì)打包進(jìn)生產(chǎn)環(huán)境的js文件里面
  • devDependencies:開發(fā)環(huán)境依賴包的名稱和版本號,即這些 依賴包 只用于 代碼開發(fā) 的時(shí)候赔嚎,不會(huì)打包進(jìn) 生產(chǎn)環(huán)境js文件 里面
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末膘盖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子尤误,更是在濱河造成了極大的恐慌侠畔,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件损晤,死亡現(xiàn)場離奇詭異软棺,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)尤勋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門喘落,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人最冰,你說我怎么就攤上這事瘦棋。” “怎么了暖哨?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵赌朋,是天一觀的道長。 經(jīng)常有香客問我,道長箕慧,這世上最難降的妖魔是什么服球? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮颠焦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘往枣。我一直安慰自己伐庭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布分冈。 她就那樣靜靜地躺著圾另,像睡著了一般。 火紅的嫁衣襯著肌膚如雪雕沉。 梳的紋絲不亂的頭發(fā)上集乔,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機(jī)與錄音坡椒,去河邊找鬼扰路。 笑死,一個(gè)胖子當(dāng)著我的面吹牛倔叼,可吹牛的內(nèi)容都是我干的汗唱。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼丈攒,長吁一口氣:“原來是場噩夢啊……” “哼哩罪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起巡验,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤际插,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后显设,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體框弛,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年敷硅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了功咒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡绞蹦,死狀恐怖力奋,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情幽七,我是刑警寧澤景殷,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響猿挚,放射性物質(zhì)發(fā)生泄漏咐旧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一绩蜻、第九天 我趴在偏房一處隱蔽的房頂上張望铣墨。 院中可真熱鬧,春花似錦办绝、人聲如沸伊约。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽屡律。三九已至,卻和暖如春降淮,著一層夾襖步出監(jiān)牢的瞬間超埋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工佳鳖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留霍殴,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓腋颠,卻偏偏與公主長得像繁成,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子淑玫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內(nèi)容