vue 項目目錄解析


vue全家桶:https://www.bilibili.com/video/av70949811/

這個視頻還行  講的很細

 

 

webpack的構建項目分析,項目目錄分析

src(資源目錄文件)都是放css,js,images文件的
因為會用到webpack,所有已會有webpack.config.js
這是后綴名為js的但是我們並沒有放到js資源中
還有很多的配置文件

首先是我們用webpack創建的vue項目目錄
.git文件是我們的代碼管理
dist文件有dundle.js這個文件是webpack進行打包輸出的文件,還有index.html忘了不知道是干嘛的

src資源管理文件:我們的組件,所有的資源放在這里入口文件main.js,入口App.vue文件,index.html
router.js。還有我們的js,images。這個lib是我們放第三方包的,又不是用npm下載的

然后呢!同級目錄下都是配置文件:.babelrc .gitignore LICENSE(這個我倒是忘了是干嘛的了)
package.json webpack.config.js 還要一個readme文件 有三個文件是我們上傳到github上一般要寫的東西吧

 

用腳手架創建的項目目錄也是差不多啦

也會有點不一樣,vue create

但是都是一樣。我現在要做的是理清關系

我才知道,為什么有創建這么多東西。都是知道是為了方便管理

 

那回到最開始,前端的主要任務是什么
寫頁面,靜態頁面(HTML,css,js)
index.html(這是主界面)然后js,css,images
我們都放在src中,然后引入進來。隨着我們的項目
越來越大,我們需要的插件,框架越來越多,
我們需要引入的就越來越多,有很多的后綴名
有很多的依賴,我們該如何管理

項目的第一步:index.html文件
我們不想把所有的靜態資源全部引入到index.html中
也為了減少二次請求,然后webpack就誕生了,他將所有的
靜態資源打包成一個文件js文件。經過webpack打包的
文件boudle.js之后,引入這個文件到index.js就可以了
這樣的文件,瀏覽器可以認識並渲染它

項目的第二步:建一個入口文件,main.js 經過webpack打包 bundle.js

 

然后接下來我們用我們主要的開發框架vue
組件,模塊化開發
我們會把所有文件都引入到main.js這個文件中
那么相當於我們,一共就是只有兩個文件
index.html main.js這兩個文件

 

OK,項目目錄,項目搞清楚了

開始一點點的寫項目了

 

前后端分離,就真的是后端那邊接口,然后丟給我們

現在的vue是以數據驅動為核心,不再操作dom

和以前的jquery不同了

現在的vue-cli是3版本了和2版本還是有很多差別吧

 

前后端必備技術,Mock技術。怎么說呢,就是我們課可以不用等待

后端傳過來接口數據,我們可以先用Mock技術模擬數據。然后呢

當后端有接口數據給我們的時候,我們用Mock技術將其融合就可以了

 

 

 

vue全家桶和webpack有關系嗎?沒有什么關系

vue只是基礎的語法   為更好快捷的做項目,滿足更好多的需求的時候

全家桶這幾技能就誕生了  都是基於vue 但不是同一個作者寫的

 

 

 

 

 

 

借用建築工程學上的概念,搭建架子

方便我們去構建項目

 

 

 

就是說vue-cli可以一鍵生成,為我們配置好了

webpack,因為我們要進行打包,所以還會用到

webpack。每次做項目都搭建webpack配置的話

很麻煩,所以vue-cli出現了命令行界面

 

所以為什么我vue create的時候會很久

因為它會自己下載很多的資源包

然后會自己配置好,

vue.js官方腳手架就是使用了webpack模板

層層聯系:vue-cli ==》webpack ==》依賴node.js

 

 

 

 

 

 

 

 

 

這些webpack,vue-router,axios,vu-cli都是工具

那我們使用之前,要先安裝這些工具,然后才可以使用

npm install -g @vue/cli  這是腳手架vue-cli3.x的安裝

現在很少有人再搭建腳手架2了,因為在3的基礎上是可以安裝

做一個腳手架2的模板的

 

 這個-g可以加在前面,也可以加在后面。並沒有什么影響

這些參數的東西

 

所以我上次用的init這個2.x版本的

 

 

這個yarn也會一個包管理工具

因為當時的npm不好用,然后呢那些大廠就推出了這個yarn 

 

腳手架vue-cli3.x創建項目直接  vue create 項目名

 

當我拉取腳手架2之后,我想創建2,就用2的命令  vue init webpack my-project

這樣的話,他就會在這個項目中配置好webpack

腳手架2創建項目還有很多選項要選擇的

想創建3就用3命令就好了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM