- 轉(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ù)
- vue.js: vue-cli工程的核心荣倾,主要特定是雙向數(shù)據(jù)綁定和組件系統(tǒng)
- vue-router: vue官方推薦使用的路由框架
- vuex: 專為vue.js應(yīng)用項(xiàng)目開發(fā)的狀態(tài)管理器悯搔,主要用于維護(hù)vue組件間公用的一些變量和方法
- axios: 用于發(fā)起GET、POST等http請求舌仍,基于Promise設(shè)計(jì)
- vux: 一個(gè)專為vue設(shè)計(jì)的移動(dòng)端UI組件庫
- 創(chuàng)建一個(gè)emit.js文件妒貌,用于vue事件機(jī)制的管理
- 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è)文件夾和文件的用處
- build文件夾:用于存放webpack 相關(guān)配置和腳本。開發(fā)中僅偶爾使用灌曙,到webpack.base.conf.js用于配置less菊碟、sass等css預(yù)編譯,或者配置下UI庫
- 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)資源名稱和路徑
- dist文件夾:默認(rèn)npm run build命令打包生成的靜態(tài)資源文件隙姿,用于生產(chǎn)部署
- node_modules: 存放npm命令下載開發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包
- src:存放項(xiàng)目源碼及需要用到的資源文件
- src/assets: 存放項(xiàng)目中需要用到的資源文件css\js\image
- src\components: 存放vue開發(fā)中一些公共組件:header.vue梅垄、footer.vue
- src/emit: 自己配置的vue集中式事件管理機(jī)制
- src/router: vue-router vue路由的配置文件
- src/service:自己配置的vue請求后臺(tái)接口方法
- src/page:存在vue頁面組件的文件夾
- src/util:存放vue開發(fā)過程中一些公共的js方法
- src/vuex:存放vuex為vue專門開發(fā)的狀態(tài)管理器
- src/app.vue: 使用標(biāo)簽<router-view>渲染整個(gè)工程的vue組件
- src/main.js: vue-cli工程的入口文件
- index.html: 設(shè)置項(xiàng)目的一些meta信息和提供掛載vue節(jié)點(diǎn)
- 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文件 里面