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命令就好了