本文為轉(zhuǎn)載镐侯，原文：Vue學(xué)習(xí)筆記進(jìn)階篇——vue-cli安裝及介紹
介紹
Vue-cli是Vue的腳手架工具
主要作用：目錄結(jié)構(gòu)咖刃、本地調(diào)試、代碼部署估脆、熱加載、單元測試
地址：https://github.com/vuejs/vue-cli
安裝
全局安裝vue-cli
npm install -g vue-cli
當(dāng)然了座云，要想使用npm工具疙赠，就必須安裝Node.js，node.js的安裝方法這里就不做介紹了疙教。
安裝完成后棺聊，在終端輸入以下命令, 可以查看vue的版本：
vue -V
輸入以下命令，可以查看官方提供的模板：
vue list
我們可以看到贞谓，vue官方提供了6個模板，我們這邊主要使用webpack模板葵诈。
那么裸弦，什么是webpack呢祟同？請看以下介紹：
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)理疙，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（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)目名稱了赃梧，自己隨便定義滤蝠，但是不能為中文。
下面授嘀，我們就用上述命令來創(chuàng)建一個自己的項(xiàng)目物咳，首先中終端通過cd命令，進(jìn)入你所需要創(chuàng)建項(xiàng)目所在的目錄蹄皱，然后執(zhí)行以下命令：
vue init webpack my-demo1
在創(chuàng)建的過程中览闰，會有一些項(xiàng)目信息和配置要自己填寫，比如項(xiàng)目名稱巷折，項(xiàng)目描述压鉴，項(xiàng)目介紹等，后面還有幾個要自己選擇y/n的锻拘，我這邊暫時都選擇了n晴弃，因?yàn)槟壳拔覀冞€用不到這些東。然后根據(jù)提示逊拍，依次鍵入以下命令：
cd my-demo1
npm install
npm run dev
這三個命令是干嘛用的呢上鞠？
cd my-demo1：這個命令當(dāng)然就是進(jìn)入我們的項(xiàng)目目錄了。
npm install：這個命令是用來安裝項(xiàng)目的依賴項(xiàng)的芯丧，我們可以看到我們創(chuàng)建的項(xiàng)目中有這個文件package.json芍阎，這個文件的作用就是用來配置項(xiàng)目的依賴項(xiàng)的，而這個命令就負(fù)責(zé)安裝這個配置文件里已經(jīng)配置的項(xiàng)目缨恒，執(zhí)行完成后項(xiàng)目目錄會多個node_modules文件夾谴咸。
npm run dev：這個命令是用來運(yùn)行項(xiàng)目的，這是個熱加載的運(yùn)行方式骗露，只有修改了項(xiàng)目會立即更新到瀏覽器的岭佳。
除了上面的3個命令，還有個比較重要的命令：
npm run build
這個會生成靜態(tài)文件萧锉，在根目錄的dist里珊随，里面有個index.html，這是服務(wù)器訪問的路徑指定到這里就可以訪問我們自己的項(xiàng)目了。
項(xiàng)目目錄介紹
項(xiàng)目目錄結(jié)構(gòu)如上圖
-
buildconfig這兩個目錄是webpack以及node服務(wù)器的配置叶洞。 -
node_modules這個目錄是npm install命令執(zhí)行后按照的依賴項(xiàng)所在目錄鲫凶。 -
src是用來存放項(xiàng)目代碼的，我們的編碼也都是在這個目錄里進(jìn)行的衩辟。 -
.babelrc babel配置文件螟炫，把我們ES2105的代碼通過它編譯成ES5的。 -
.editorconfig編輯器配置艺晴。 -
.eslintignore忽略語法檢查的目錄文件配置昼钻。 -
.eslintrc.jseslint的配置文件。 -
.gitignore配置Git倉庫的忽略封寞。 -
index.html項(xiàng)目入口模板文件然评。 -
package.jsonnode配置文件
運(yùn)行項(xiàng)目
上面說到我們運(yùn)行項(xiàng)目的命令是：
nmp run dev
下面我們就執(zhí)行一下，看下結(jié)果：
這個端口號我們也是可以修改的钥星，它是在config/index.js文件下配置的沾瓦。
只有修改這個地方，然后重新運(yùn)行就好了谦炒。
另外贯莺，我們再看看這個
npm run dev和npm run build中的dev和build是個什么東西。其實(shí)這個就是在
package.json中配置的一個腳本：
如果大家熟悉nodejs的話宁改，肯定一看就明白了缕探，不過這些就算不明白，也不影響我們的vue的學(xué)習(xí)还蹲。
單文件組件
src/component目錄是用來存放我們自己的組件的爹耗，可以看見，這里的組件是以.vue為后綴的單文件組件谜喊，一個文件就是一個組件潭兽。我把Hello.vue文件簡化后，得到以下代碼：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</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>
h1, h2 {
font-weight: normal;
}
</style>
這里面包含了斗遏，模板-即<template>標(biāo)簽的內(nèi)容山卦，js-即<script>標(biāo)簽的內(nèi)容，和樣式-即<style>標(biāo)簽的內(nèi)容诵次，在<style>里有個scoped屬性账蓉，這個的意思就是這個樣式僅在當(dāng)前組件內(nèi)有效果，如果沒有這個屬性逾一，則這個樣式就是全局的铸本，會影響到其他組件的樣式，所以這個一定要根據(jù)情況而定遵堵。
另外箱玷，如果想在我們的項(xiàng)目中引用其他的js, 或css 我們可以在根目錄的index.html文件中添加，這樣全局都可以使用的。
完
本文為原創(chuàng)汪茧，轉(zhuǎn)載請注明出處
上一節(jié)：Vue學(xué)習(xí)筆記進(jìn)階篇——函數(shù)化組件
返回目錄
下一節(jié)：Vue學(xué)習(xí)筆記進(jìn)階篇——vue-router安裝及使用
