Vue小白課（三）——CLI搭建項目（Vue3.x）

時間 2019-11-07

標籤 vue cli 搭建項目 vue3.x 简体版

原文原文鏈接

@Vue-CLI3搭建項目css

create by db on 2019-1-10 16:28:10 Recently revised in 2019-3-12 15:59:45html

Hello 小夥伴們，若是以爲本文還不錯，麻煩點個贊或者給個 star，大家的贊和 star 是我前進的動力！GitHub 地址前端

查閱網上諸多資料，並結合本身的學習經驗，寫下這篇Vue3.0學習筆記，現分享給你們，以供參考。vue

做爲一隻前端菜鳥，本篇文章旨在記錄本身的學習心得，若有不足，還請多多指教，謝謝你們。node

前言

Vue-CLI 是 vue 官方團隊推出的一款快速開發 vue 項目的構建東西，具備開箱即用而且供給簡練的自定義配備等功用。包括三個組件：webpack

CLI：@vue/cli 全局安裝的 npm 包，提供了終端裏的vue命令（如：vue create 、vue serve 、vue ui 等命令）
CLI 服務：@vue/cli-service是一個開發環境依賴。構建於 webpack 和 webpack-dev-server 之上（提供如：serve、build 和 inspect 命令）
CLI 插件：給Vue 項目提供可選功能的 npm 包（如： Babel/TypeScript 轉譯、ESLint 集成、unit和 e2e測試等）

Vue-CLI 3.0 正式版於 2018年8月10號發佈，大神尤雨溪表示，Vue CLI 3.0與其餘的版本徹底不一樣，它經歷了重構，目的是：git

儘量減小現代前端工具在配置上的煩惱，尤爲是在開發者將多個工具混合使用時；
儘量在工具鏈中加入最佳實踐，並讓其成爲Vue應用程序的默認實踐。

與Vue-CLI 2.0相比，Vue-CLI 3.0發生了不少變化。。。github

一言以蔽之，就是讓開發更簡單！web

此筆記旨在幫助Vue小白瞭解並應用Vue3項目的命令行搭建過程，但願能幫獲得你們。vue-router

參考文獻：

正文

搭建Vue-CLI3.x開發環境

一、更新npm到最新版本

Vue CLI 3須要 nodeJs ≥ 8.9 (官方推薦 8.11.0+，你可使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本）。

命令運行

npm install -g npm

npm就自動爲咱們更新到最新版本

更新完成以後，以管理員身份打開cmd管理工具，，輸入 node -v，回車，可查看node版本號.

二、安裝全局Vue-CLI3.x腳手架

Vue-CLI是vue官方提供的一個命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘便可啓動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

首先查看咱們當前vue版本號，在命令行輸入

vue -V

若是出現2.X.X，則說明咱們如今安裝的Vue-CLI2；

而後咱們就須要更新升級了，命令行輸入如下命令，回車；

npm i -g @vue/cli

再次查看Vue的版本號3.x.x，則說明更新成功；

命令行建立Vue-CLI3項目

一、經過Vue-CLI3建立一個vue項目

進入你須要建立項目的文件夾，打開命令行。

輸入如下命令，回車

vue create test

這裏test指的是項目名，該命令執行後會建立一個名爲test的目錄，也就是咱們所搭建的項目。

此處有兩個選擇：

default (babel, eslint)：默認套餐，提供babel和eslint支持
Manually select features：本身去選擇須要的功能，提供更多的特性選擇。好比若是想要支持 TypeScript ，就應該選擇這一項。

可使用上下方向鍵來切換選項。若是隻須要 babel 和 eslint 支持，那麼選擇第一項，就完事了，靜靜等待 vue 初始化項目。

Vue-CLI3 內置支持了8個功能特性，能夠多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇全部，使用 i 鍵翻轉選項。

對於每一項的功能，此處作個簡單描述：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                           //轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。                      
 ( ) TypeScript// TypeScript是一個JavaScript（後綴.js）的超集（後綴.ts）包含並擴展了 JavaScript 的語法，須要被編譯輸出爲 JavaScript在瀏覽器運行，目前較少人再用
 ( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
 ( ) Router                           // vue-router（vue路由）
 ( ) Vuex                             // vuex（vue的狀態管理模式）
 ( ) CSS Pre-processors               // CSS 預處理器（如：less、sass）
 ( ) Linter / Formatter               // 代碼風格檢查和格式化（如：ESlint）
 ( ) Unit Testing                     // 單元測試（unit tests）
 ( ) E2E Testing                      // e2e（end to end） 測試
複製代碼

我選擇了 Router，Vuex，CSS Pre-processors，Linter / Formatter

按住enter進入下一步，接下來都是對以前每項選項的更詳細的選擇。

css:選擇SCSS/SASS
Linter / Formatter:選擇prettier

這一步就是要選擇配置文件的位置了。對於 Babel 、PostCSS 等，均可以有本身的配置文件： .babelrc 、 .postcssrc 等等，同時也能夠把配置信息放在 package.json 裏面。此處出於對編輯器（ Visual Studio Code ）的友好支持（編輯器通常默認會在項目根目錄下尋找配置文件），選擇把配置文件放在外面，選擇 In dedicated config files

補充

Save this as a preset for future projects?:這個就是問要不要把當前的這一系列選項配置保存起來，方便下一次建立項目時複用。選擇y。

選完以後， Vue-CLI 就根據前面選擇的內容，開始初始化項目了。

最後出現以下代碼

🎉  Successfully created project test.
👉  Get started with the following commands:

 $ cd test
 $ npm run serve
複製代碼

說明已經初始化成功，Vue-CLI3已經將項目搭建完成。

二、進入你的項目文件夾

項目搭建好了，如今就能夠進入項目文件夾。

輸入如下命令，回車進入新建的項目。

cd test

三、經過npm在項目裏安裝依賴

由於各個模板之間都是相互依賴的，因此如今咱們要安裝依賴。

輸入如下命令，回車安裝依賴

npm install

四、啓動項目

一切環境依賴安裝準備就緒，咱們來測試一下本身新建的vue項目的運行狀況。

輸入如下命令，回車啓動項目

npm run serve

結果會彈出一個瀏覽器訪問地址默認爲localhost:8080，以下：

App running at:
  - Local:   http://localhost:8080/
  - Network: http://***.***.***.***:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
複製代碼

在瀏覽器中打開http://localhost:8080或者Network的地址，就能看到你的項目了