1.Vue 安装与简单使用
Hello，我是 Alex 007，一個(gè)熱愛計(jì)算機(jī)編程和硬件設(shè)計(jì)的小白，為啥是007呢？因?yàn)榻?Alex 的人太多了，再加上每天007的生活，Alex 007就誕生了。
1.Vue的安裝與簡(jiǎn)單使用
這篇文章我們來Vue的安裝與簡(jiǎn)單使用。
Vue的使用方式呢有很多種，第一種方式就是直接使用<script>標(biāo)簽的方式去引入，第二種方式呢，大家可以使用Vue官方提供的CLI命令行工具，去快速的搭建比較復(fù)雜的腳手架。
作為初學(xué)者來講呢，強(qiáng)烈建議大家先不使用命令行的方式去創(chuàng)建Vue的應(yīng)用，那當(dāng)我們對(duì)這個(gè)Vue有一定的了解和學(xué)習(xí)了之后，再去使用CLI的方式去創(chuàng)建Vue應(yīng)用。
直接用 <script> 引入
下載
那在官方文檔上的我們可以看到Vue為我們提供了兩個(gè)版本，一個(gè)是開發(fā)版本，一個(gè)是生產(chǎn)版本，那顧名思義，開發(fā)的時(shí)候推薦大家使用開發(fā)版本，因?yàn)樗暾木婧驼{(diào)試信息，生產(chǎn)環(huán)境下推薦大家使用生產(chǎn)版本去替換開發(fā)時(shí)使用的開發(fā)版本，因?yàn)樯a(chǎn)版本的話經(jīng)過壓縮會(huì)更小，而且刪除了一些警告信息，點(diǎn)擊開發(fā)版本或者是生產(chǎn)版本，我們可以下載并得到一個(gè)vue.js或vue.min.js這樣的一個(gè)文件。
然后我們創(chuàng)建一個(gè)index.html文件，通過 <script> 引入vue.js：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript" src="vue.js"></script></body> </html>打開網(wǎng)頁之后，并沒有任何的內(nèi)容，我們需要打開控制臺(tái)，這時(shí)候如果我們?cè)诳刂婆_(tái)里面可以看見兩段提示，那就證明我們的vue.js已經(jīng)成功地部署到項(xiàng)目里了。
CDN
CDN的本質(zhì)是將媒體資源，動(dòng)靜態(tài)圖片，HTML，CSS，JS等內(nèi)容緩存到距離你更近的IDC，從而讓用戶進(jìn)行共享資源，實(shí)現(xiàn)縮減站點(diǎn)間的響應(yīng)時(shí)間等需求。
也就是說，我們不需要把vue.js下載到本地，可以直接使用網(wǎng)絡(luò)上的資源，省去了下載這個(gè)步驟。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- <script type="text/javascript" src="vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></body> </html>同樣可以看到兩段提示信息：
對(duì)于生產(chǎn)環(huán)境，推薦鏈接到一個(gè)明確的版本號(hào)和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>NPM安裝
在用Vue構(gòu)建大型應(yīng)用時(shí)推薦使用NPM安裝，它能夠很好的和webpack等模塊打包器配合使用。
在使用NPM之前，我們要先安裝Node.js，所謂的npm其實(shí)是Node.js的包管理工具。
去Node.js官網(wǎng)上下載最新的版本，目前最新版本是12.18.2.
下載好后，雙擊安裝：
Next：
Accept，Next：
改一下安裝路徑，Next：
Next：
Next：
等待安裝完成：
回車，繼續(xù)，會(huì)幫助我們自動(dòng)安裝一些應(yīng)用，比如Python。
Node.js安裝完成，我們來驗(yàn)證一下，打開cmd，查看node版本：
同樣可以查看NPM的安裝版本：
此時(shí)NPM的本地倉庫在C盤：
Node.js安裝目錄下兩個(gè)文件夾：
執(zhí)行以下兩個(gè)命令：
如果有提示，可以通過以下命令升級(jí)npm：
為了提升速度，需要配置一個(gè)鏡像站：
npm config set registry=http://registry.npm.taobao.org檢查配置是否成功：
npm config get registry
通過NPM安裝Vue：
安裝文件在如下目錄：
通過npm安裝的Vue新建項(xiàng)目：
安裝完成之后，可以通過命令行直接運(yùn)行項(xiàng)目：
cd npmVueProject npm run dev
打開瀏覽器，輸入網(wǎng)址就可以看到Vue項(xiàng)目了：
項(xiàng)目文件：
到此為止，我們Vue的安裝與簡(jiǎn)單使用就講完了，接下來我們就進(jìn)入正式的Vue學(xué)習(xí)。
與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的1.Vue 安装与简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： npm : 无法加载文件 D:\Prog
- 下一篇： 快手2020校园招聘秋招笔试--工程B试