這篇文章給大家分享的是有關(guān)Vue中vue-cli安裝的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比老城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式老城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋老城地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

介紹

Vue-cli是Vue的腳手架工具

主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試

安裝

全局安裝vue-cli

npm install -g vue-cli

當(dāng)然了，要想使用npm工具，就必須安裝Node.js，node.js的安裝方法這里就不做介紹了。

安裝完成后，在終端輸入以下命令, 可以查看vue的版本：vue -V

輸入以下命令，可以查看官方提供的模板：

vue list

我們可以看到，vue官方提供了6個(gè)模板，我們這邊主要使用webpack模板。

那么，什么是webpack呢？請(qǐng)看以下介紹：

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目的命令：

vue init <template-name> <project-name>

template-name為模板名稱，例如上面vue list命令查到的模板的模板名稱都可以使用。

project-name就是你自己創(chuàng)建的項(xiàng)目名稱了，自己隨便定義，但是不能為中文。

下面，我們就用上述命令來(lái)創(chuàng)建一個(gè)自己的項(xiàng)目，首先中終端通過(guò)cd命令，進(jìn)入你所需要?jiǎng)?chuàng)建項(xiàng)目所在的目錄，然后執(zhí)行以下命令：

vue init webpack my-demo1

在創(chuàng)建的過(guò)程中，會(huì)有一些項(xiàng)目信息和配置要自己填寫，比如項(xiàng)目名稱，項(xiàng)目描述，項(xiàng)目介紹等，后面還有幾個(gè)要自己選擇y/n的，我這邊暫時(shí)都選擇了n，因?yàn)槟壳拔覀冞€用不到這些東。然后根據(jù)提示，依次鍵入以下命令：

cd my-demo1
npm install
npm run dev

這三個(gè)命令是干嘛用的呢？

cd my-demo1：這個(gè)命令當(dāng)然就是進(jìn)入我們的項(xiàng)目目錄了。

npm install：這個(gè)命令是用來(lái)安裝項(xiàng)目的依賴項(xiàng)的，我們可以看到我們創(chuàng)建的項(xiàng)目中有這個(gè)文件package.json，這個(gè)文件的作用就是用來(lái)配置項(xiàng)目的依賴項(xiàng)的，而這個(gè)命令就負(fù)責(zé)安裝這個(gè)配置文件里已經(jīng)配置的項(xiàng)目，執(zhí)行完成后項(xiàng)目目錄會(huì)多個(gè)node_modules文件夾。

npm run dev：這個(gè)命令是用來(lái)運(yùn)行項(xiàng)目的，這是個(gè)熱加載的運(yùn)行方式，只有修改了項(xiàng)目會(huì)立即更新到瀏覽器的。

除了上面的3個(gè)命令，還有個(gè)比較重要的命令：

npm run build

這個(gè)會(huì)生成靜態(tài)文件，在根目錄的dist里，里面有個(gè)index.html，這是服務(wù)器訪問(wèn)的路徑指定到這里就可以訪問(wèn)我們自己的項(xiàng)目了。

項(xiàng)目目錄介紹

項(xiàng)目目錄結(jié)構(gòu)如上圖

1. build config 這兩個(gè)目錄是webpack以及node服務(wù)器的配置。

2. node_modules 這個(gè)目錄是npm install命令執(zhí)行后按照的依賴項(xiàng)所在目錄。

3. src 是用來(lái)存放項(xiàng)目代碼的，我們的編碼也都是在這個(gè)目錄里進(jìn)行的。

4. .babelrc babel配置文件，把我們ES2105的代碼通過(guò)它編譯成ES5的。

5. .editorconfig編輯器配置。

6. .eslintignore 忽略語(yǔ)法檢查的目錄文件配置。

7. .eslintrc.jseslint的配置文件。

8. .gitignore配置Git倉(cāng)庫(kù)的忽略。

9. index.html項(xiàng)目入口模板文件。

10. package.json node配置文件

運(yùn)行項(xiàng)目

上面說(shuō)到我們運(yùn)行項(xiàng)目的命令是：

nmp run dev

下面我們就執(zhí)行一下，看下結(jié)果：

這個(gè)端口號(hào)我們也是可以修改的，它是在config/index.js文件下配置的。

只有修改這個(gè)地方，然后重新運(yùn)行就好了。

另外，我們?cè)倏纯催@個(gè)npm run dev和npm run build中的dev和build是個(gè)什么東西。

其實(shí)這個(gè)就是在package.json中配置的一個(gè)腳本：

如果大家熟悉nodejs的話，肯定一看就明白了，不過(guò)這些就算不明白，也不影響我們的vue的學(xué)習(xí)。

單文件組件

src/component目錄是用來(lái)存放我們自己的組件的，可以看見，這里的組件是以.vue為后綴的單文件組件，一個(gè)文件就是一個(gè)組件。我把Hello.vue文件簡(jiǎn)化后，得到以下代碼：

<template>
 <div class="hello">
  <h2>{{ msg }}</h2>
 </div>
</template>

<script>
export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2, h3 {
 font-weight: normal;
}
</style>

這里面包含了，模板-即<template>標(biāo)簽的內(nèi)容，js-即<script>標(biāo)簽的內(nèi)容，和樣式-即<style>標(biāo)簽的內(nèi)容，在<style>里有個(gè)scoped屬性，這個(gè)的意思就是這個(gè)樣式僅在當(dāng)前組件內(nèi)有效果，如果沒有這個(gè)屬性，則這個(gè)樣式就是全局的，會(huì)影響到其他組件的樣式，所以這個(gè)一定要根據(jù)情況而定。

另外，如果想在我們的項(xiàng)目中引用其他的js, 或css 我們可以在根目錄的index.html文件中添加，這樣全局都可以使用的。

感謝各位的閱讀！關(guān)于“Vue中vue-cli安裝的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享名稱：Vue中vue-cli安裝的示例分析-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://chinadenli.net/article34/cosgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、虛擬主機(jī)、微信小程序、網(wǎng)站制作、Google、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)