vue-Cli 簡單介紹

項目前導 學習筆記

一、vue-cli

1.1、介紹

        vue-cli 是和 vue 進行深度組合的工具，可以快速幫我們創建 vue 項目，並且把一些腳手架相關的代碼給我們創建好。一般使用 vue 開發項目，都是用 vue-cli 來創建項目的。

1.2、安裝

        Vue CLI 需要 Node.js 8.9 或更高版本 (推薦8.11.0+)。node 環境安裝後，直接通過 npm install -g @vue/cli 即可安裝。安裝完成後，輸入 vue --version ，如果出現了版本號，說明已經下載完成。

---

二、使用

2.1、用命令行創建項目

1. 在指定路徑下使用 vue create [項目名稱] 創建項目。

2. 會讓你選擇要安裝哪些包（默認是 Babel 和 ESLint ），也可以手動選擇。

3. 如果在安裝的時候比較慢，可以在安裝的時候使用淘寶的鏈接：vue create -r https://registry.npm.taobao.org [項目名稱]。

4. 如果實在不想在創建項目的時候都指定淘寶鏈接，可以在當前用戶目錄下，找到 .npmrc，然後設置 registry=https://registry.npm.taobao.org。

2.2、用界面創建項目

1. 打開 cmd，進入到你項目存儲的路徑下。然後執行 vue ui，就會自動打開一個瀏覽器界面。

2. 按照指引進行選擇，然後一頓下一步即可創建。

2.3、用界面創建項目

1. node_modules：本地安裝的包的文件夾。

2. public：項目出口文件。

3. src：項目源文件：

   1. assets：資源文件，包括字體，圖片等。
   2. components：組件文件。
   3. App.vue：入口組件。
   4. main.js：webpack 在打包的時候的入口文件。

4. babel.config.js：es* 轉低級 js 語言的配置文件（就是爲了向下兼容）。

5. package.json：項目包管理文件。

2.4、組件定義和導入

1. 定義： 組件定義跟之前的方式是一模一樣的。只不過現在模板代碼專門放到 .vue 的 template 標籤中，所以不再需要在定義組件的時候傳入 template 參數。另外，因爲需要讓別的組件使用本組件，因此需要用 export default 將組件對象進行導出。
   
   在 components 文件夾下創建文件 MyPage.vue 文件

	<template>
		<div class="mypage">
	        <h1>我的view</h1>
	        <p class="info">{{info}}</p>
	    </div>
	</template>
	
	
	<script>
		export default{
		    data: function(){
		        return {
		            info: "這是我的第一個組件頁面"
		        }
		    }
		}
	</script>  
	
	
	<style>
		.info{
		    background-color: aquamarine;
		}
	</style>

2. 導入： 因爲現在組件是在不同的文件中。所以如果需要引用，那麼必須進行導入。用 ES6 語法的 import aaa from vue文件的路徑 ，其中 aaa 是自己起的組件的別名。
   
   App.vue 文件

	<template>
		<div id="app">
		  <ABC></ABC>
		</div>
	</template>
	
	
	<script>
		import ABC from "./components/MyPage.vue"
		
		export default {
		  name: "app",
		  components: {
		    "ABC": ABC
		  }
		}
	</script>
	
	
	<style scoped>
		body{
		  font-size: 43px;
		}
	</style>

2.5、局部樣式

        默認情況下在 .vue 文件中的樣式一旦寫了，那麼會變成全局的。如果只是想要在當前的組件中起作用，那麼可以在 style 中加上一個 scoped 屬性即可。示例代碼如下：

	<style scoped>
		.info{
		   background-color: red;
		}
	</style>

2.6、使用 sass 語法

        很多小夥伴在寫樣式代碼的時候，不喜歡用原生 css，比較喜歡用比如 sass 或者 less，這裏我們以 sass 爲例，我們可以通過以下兩個步驟來實現：

1. 安裝 loader：webpack 在解析 scss 文件的時候，會去加載 sass-loader 以及 node-loader ，因此我們首先需要通過 npm 來安裝一下：

	npm install node-sass@4.12.0 --save-dev
	
	npm install sass-loader@7.0.3 --save-dev

2. 指定 sass 語言：在指定 style 的時候，添加 lang="scss" 屬性，這樣就會將 style 中的代碼識別爲 scss 語法。

---

三、運行

        最後說一下怎麼運行這個項目呢，當然不是直接打開 html 文件了。

1. 運行 cmd 中
2. 進入到項目文件夾 cd 文件路徑
3. 開啓服務 npm run server
4. 開啓之後會返回兩個鏈接，訪問即可