Vue-CLI 基本使用

命令行界面（英語：command-line interface，縮寫：CLI）是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執行。也有人稱之為字符用戶界面（CUI）

Vue-CLI是由Vue提供的一個官方CLI又稱Vue腳手架，是一個基于Vue.js進行快速開發的工具，能夠自動創建項目必須的項目結構、文件模板和運行環境。

• 通過 vue-cli 實現的交互式的項目腳手架。
• 一個運行時依賴 (vue-cli-service)，該依賴：
  • 可升級；
  • 基于 webpack 構建，并帶有合理的默認配置；
  • 可以通過項目內的配置文件進行配置；
  • 可以通過插件進行擴展。
• 一個豐富的官方插件集合，集成了前端生態中最好的工具。
• 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。

Vue CLI 致力于將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基于智能的默認配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。

1.1 Node.js的安裝和配置

使用Vue-CLI需要安裝Node.js環境。NPM（Node Package Manager）是隨同NodeJS一起安裝的包管理工具，能夠解決開發JavaScript應用時的包管理的需求（類似于Java中的Maven）。

• 安裝Node.js
  安裝Nodejs ,在官方下載安裝包后，雙擊安裝，沒有什么特別的步驟。

注意：Node.js的版本更新比較快，不要安裝最新版，避免兼容性問題。 安裝后，在命令行輸入 node -v 和 npm -v查看版本號

• 配置

#設置npm管理的包的存儲位置，默認在C盤。避免C盤空間不足，設置到其它位置（保證存在相應目錄）

#并將 “D:\nodejs\node_global” 配置到path環境變量中

npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

#npm 官方源在國內訪問很慢，需要使用淘寶的鏡像替換npm
npm config set registry https://registry.npm.taobao.org

1.2 安裝Vue-CLI腳手架

#安裝vue-cli
npm install -g vue-cli
#查看版本
vue --version

第1個腳手架項目

1.選擇一個合適的目錄，打開cmd，按照如下步驟創建項目

1.#初始化項目 vue init webpack 項目名 vue init webpack vue-cli-test #下載模板 - downloading template2.開始交互式的創建項目 ? Project name (vue-cli-test) #確認項目名，回車即可 ? Project description (A Vue.js project) #添加項目描述，回車即可 ? Author xushy <smarttime@foxmail.com> #確認作者信息，回車 ? Vue build (Use arrow keys) #此處，通過上下鍵可以選擇Runtime+Compiler和Runtime-only，選擇第1個即可 > Runtime + Compiler: recommended for most users #回車Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere ? Install vue-router? (Y,n) #是否安裝vue-router，默認安裝，回車 ? Use ESLint to lint your code (Y/n) #是否安裝ESLint進行代碼格式校驗，輸入n不安裝 ? Set up unit tests (Y/n)#是否預設單元測試，輸入n ? Setup e2e tests with Nightwatch? (Y/n) #是否使用ew2e工具，輸入n ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) > Yes, use NPM #回車Yes, use YarnNo, I will handle that myself# Installing project dependencies ... # ======================== 接下來開始下來各種依賴，等待即可...added 1273 packages from 675 contributors in 114.144s42 packages are looking for fundingrun `npm fund` for details#以下為成功提示信息 # Project initialization finished! # ========================To get started:cd vue-cli-testnpm run dev

2.使用idea打開上一步新建的項目

3.在Idea中安裝Vue.js插件，然后重啟Idea

2.1 Vue-CLI項目初識

1.Vue-CLI項目結構簡析

2.啟動項目

3.訪問

Vue-CLI項目探秘

3.1單頁面組件

傳統的組件的定義示例：

<template id="component-id"><p >hello {{content}}</p> </template> <script>Vue.component('組件名',{el:"#component-id",data(){return {content: "寫的好的話一鍵三連，謝謝"}}}) </script>

這種方式在很多中小規模的項目中運作的很好，在這些項目里 JavaScript 只被用來加強特定的視圖。但當在更復雜的項目中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：

• 全局定義 (Global definitions) 強制要求每個 component 中的命名不得重復
• 不支持 CSS (No CSS support) 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
• 可讀性差，維護難度高 多個組件定義在一起，代碼顯得臃腫復雜

Vue提供了文件擴展名為 .vue 的 single-file components (單文件組件) 為以上所有問題提供了解決方法：
這是一個文件名為 Hello.vue 的簡單實例：

<template><p >hello {{content}}</p> </template> <script>//使用export將組件導出，需要使用組件的文件就可以使用import導入export default {data(){return {content: "寫的好的話一鍵三連，謝謝"}}} </script> <style scoped>p{font-size: 2em;text-align: center;} </style>

一個 .vue文件就是一個組件，文件名就是組件名（按照規范vue文件名各個單詞首字母要大寫）。每個 .vue 文件包含三種類型的頂級語言塊 < template>、< script> 和 < style>。在一個組件里，其模板、邏輯和樣式是內部耦合的，并且把他們搭配在一起實際上使得組件更加內聚且更可維護。

3.2 運行流程分析

請求http://localhost:8081/,進入主頁面index.html,index.html中引入了main.js的代碼

main.js中創建了Vue實例，使用 App組件渲染index.html，并載入了router路由規則

router/index.js中定義了 / 的地址對應的組件為HelloWorld，App組件中的router-view使用HelloWorld渲染

總結：

• index.html日后基本不會修改
• App.vue作為根組件，定義了頁面的基本結構。日后開發時，根據需求修改它
• 在components中新建 .vue文件來定義組件
• 在router/index.js中定義路由規則
• 在main.js中引入項目需要的庫

示例演示：
1.componets下新增Hello.vue

<template><p>hello {{content}}</p> </template><script>export default {name: "Hello",data(){return{content:"寫的好的話一鍵三連，謝謝"}}} </script><style scoped>p{font-size: 2em;text-align: center;color: yellow;} </style>

2.router/index.js添加路由配置

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' //引入Hello組件 import HelloBaizhi from "@/components/Hello";Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},//配置新的路由規則{path:"/hello",name: "Hello",component: Hello}] })

注：第三部分的全部內容整合成pdf文檔，可以進行下載保存

https://download.csdn.net/download/technologist_28/21114086

總結

以上是生活随笔為你收集整理的Vue第三部分(1)：Vue脚手架构建过程详细介绍和案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。