Vue知識點總結(23)——Vue-Cli3腳手架基本配置和快速原型開發（超級詳細）
阿新 • • 發佈：2021-02-05
碼字不易，有幫助的同學希望能關注一下我的微信公眾號：Code程式人生，感謝！
在這之前我們已經把vue的基礎部分已經基本講述完畢。
我們之前寫vue元件的流程都是
Vue.component("元件名", {});
new Vue({
components:元件名
});
這種方式在很多中小規模的專案中運作的很好，在這些專案裡 JavaScript 只被用來加強特定的檢視。但當在更復雜的專案中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：
- 全域性定義 (Global definitions)強制要求每個 component 中的命名不得重複
- 字串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到醜陋的
- 不支援 CSS (No CSS support) 意味著當 HTML 和 JavaScript 元件化時，CSS 明顯被遺漏
- 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用前處理器，如 Pug (formerly Jade) 和 Babel
副檔名為 .vue 的單檔案元件為以上所有問題提供瞭解決方法，並且還可以使用 webpack 或 Browserify 等構建工具。
使用 .vue
- 完整語法高亮
- CommonJS模組
- 元件作用域的CSS
Vue為我們提供了一套非常好用的腳手架工具Vue-Cli3，可以為我們把專案初始化的基礎部分的目錄結構構建完整。
下面我們說一下它的基本配置：
- 安裝Nodejs
保證Nodejs8.9或更高版本
終端輸出 node -v，保證已經安裝完成 - 安裝淘寶映象源
npm install -g cnpm --registry=https://registry.npm.taobao.org
以後的 npm 可以用 cnpm 代替
（因為大部分人使用npm下載東西都會很慢，淘寶映象cnpm可以給我們下載同樣的東西，並且速度更快。） - 安裝Vue Cli3腳手架cnpm install -g @vue/cli
- 檢查其版本是否正確
vue --version
快速原型開發
使用 vue serve 和 vue build 命令對單個 *.vue 檔案進行快速原型開發，不過這需要先額外安裝一個全域性的擴充套件：
cnpm install -g @vue/cli-service-global
vue serve 的缺點就是它需要安裝全域性依賴,這使得它在不同機器上的一致性不能得到保證.因此這隻適用於快速原型開發.
需要的僅僅是一個 App.vue 檔案：
<template>
<div>
<h2>hello world 單頁面元件</h2>
</div>
</template>
<script>
export default {};
</script>
<style></style>
然後在這個 App.vue 檔案所在的目錄下執行:
vue serve
以上內容僅僅是快速原型開發.vue字尾的這種單檔案元件的流程。
下篇文章講述一下在我們開發完整的專案時，真正使用我們Vue-Cli3構建專案目錄的流程。
有微信小程式課設、畢設需求聯絡個人QQ：505417246
關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號，請大家多多關注，謝謝！
