Vue CLI怎么安裝配置和使用

這篇文章主要介紹“Vue CLI怎么安裝配置和使用”，在日常操作中，相信很多人在Vue CLI怎么安裝配置和使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue CLI怎么安裝配置和使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、什么是CLI 腳手架（規范，標準）

官方：Vue.js 開發的標準工具

**CLI ** ：命令行界面

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

二、什么是Vue CLI

vue的命令行接口，相當于java中的（項目創建管理：maven 項目構建工具）

通過vue cli提供的一個標準的vue應用 這個vue應用就存在對應的腳手架規范

Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統。 使用Vue 腳手架之后我們開發的頁面將是一個完整系統（項目）。 前端系統

腳手架（vue項目的規范）=》構建時需要使用命令=》構建出的項目就存在規范===》命令：構建項目+開發：圖像界面開發

三、 Vue CLI優勢

通過 vue-cli 搭建交互式的項目腳手架。

通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發（不需要引入vue-min.js等）

一個運行時依賴 （@vue/cli-service），該依賴：

可升級;（一個命令搞定）

基于 webpack 構建，并帶有合理的默認配置；（webpack 前端打包工具 ）index.html+組件（N個）

可以通過項目內的配置文件進行配置； cli 項目配置文件 添加

可以通過插件進行擴展。 cli 項目里

一個豐富的官方插件集合，集成了前端生態中最好的工具。 webpack打包工具===>dist目錄 nodejs 服務器（tomcat java） 熱部署插件 npm包

webpack 編寫的時候是javascript6運行時自動編譯為javascript6

一套完全圖形化的創建和管理 Vue.js 項目的用戶界面（vue cli3.x才支持 | 當前企業中用的是vue cli 2.x）

node.js 的服務器 支持熱部署

四、Vue CLI安裝

1. node.js環境準備

（1）下載nodejs

http://nodejs.cn/download/

windows系統： .msi 安裝包（exe）指定安裝位置 .zip（壓縮包）直接解壓縮指定目錄

mac os 系統： .pkg 安裝包格式自動配置環境變量 .tar.gz（壓縮包）解壓縮安裝到指定名

（2）配置nodejs環境變量

1.windows系統：

計算上右鍵屬性----> 高級屬性 ---->環境變量 添加如下配置：

NODE_HOME=  nodejs安裝目錄

  PATH    = xxxx;%NODE_HOME%

2.macos 系統

推薦使用。pkg安裝直接配置node環境

（3）驗證nodejs環境是否成功

啟動cmd窗口

在任意位置 輸入命令： node –v

展示node版本即可v14.0.0

（4）npm介紹

node package mangager nodejs包管理工具 前端主流技術 npm 進行統一管理

maven 管理java后端依賴 遠程倉庫（中心倉庫） 阿里云鏡像

npm 管理前端系統依賴 遠程倉庫（中心倉庫） 配置淘寶鏡像

npm （node package manager） nodejs包管理工具

在世界范圍內維護的中心庫，用于管理前端js文件

命令基本使用

npm install axios         通過網絡從中心庫下載axios  沒有版本時默認下載最新版本

npm install axios@x.x.x   通過網絡從中心庫下載axios指定版本

（5）配置淘寶鏡像

npm config set registry 

查看淘寶鏡像是否安裝成功

npm config get registry

（7）配置npm下載依賴位置

#windows:

  #1.設置緩存位置

  npm config set cache "D:\noderepository\npm-cache"

  #2.設置

  npm config set prefix "D:\noderepository\npm_global"

#mac os:

  npm config set cache "/Users/chenyannan/dev/nodereps"

  npm config set prefix "/Users/chenyannan/dev/nodereps"

（8）驗證nodejs環境配置

npm config ls

1

2.安裝腳手架

（1）卸載腳手架

  npm uninstall -g @vue/cli  //卸載3.x版本腳手架

  npm uninstall -g vue-cli  //卸載2.x版本腳手架

（2）Vue Cli官方網站

https://cli.vuejs.org/zh/guide/

（3）安裝vue Cli

npm install -g vue-cli

輸入 vue init

（2）配置nodejs本地倉庫環境變量

path=…;D:\noderepository\npm_global

目的：便于后續使用vue cli相關命令

（3）測試命令能否執行

窗口中輸入命令 ：vue init

顯示如上界面即可

3.第一個vue腳手架項目

（1） 創建vue腳手架第一個項目

vue init webpack 項目名

（2）創建第一個項目

下載失敗提示

下載成功后

  hello     ------------->項目名

    -build  ------------->用來使用webpack打包使用build依賴  構建一些依賴文件

    -config ------------->用來做整個項目配置目錄   主要用來對 開發 測試 環境進行配置

    -node_modules  ------>用來管理項目中使用依賴

    -src           ------>用來書寫vue的源代碼[重點]

      +assets      ------>用來存放靜態資源 [重點]

        components   ------>用來書寫Vue組件 [重點]

        router       ------>用來配置項目中路由[重點]

        App.vue      ------>項目中根組件[重點]

        main.js      ------>項目中主入口[重點]

    -static        ------>其它靜態

    -.babelrc      ------> 將es6語法轉為es5運行

    -.editorconfig ------> 項目編輯配置

    -.gitignore    ------> git版本控制忽略文件

    -.postcssrc.js ------> 源碼相關js

    -index.html    ------> 項目主頁

    -package.json  ------> 類似與pom.xml 依賴管理  jquery 不建議手動修改

    -package-lock.json ----> 對package.json加鎖

    -README.md         ----> 項目說明文件

下載成功后

文件顯示

（3）如何運行在項目的根目錄中執行

a、 切換到創建項目的根目錄

b、 在項目根目錄中執行命令 npm run dev

（4）如何訪問項目

http://localhost:8080

（5）項目的包結構

傳文件時這兩個文件可以刪除。/當前目錄

（5）Vue Cli中項目開發方式

注意： 一切皆組件 一個組件中 js代碼 html代碼 css樣式

1. VueCli開發方式是在項目中開發一個一個組件對應一個業務功能模塊，日后可以將多個組件組合到一起形成一個前端系統

2. 日后在使用vue Cli進行開發時不再書寫html,編寫的是一個個組件（組件后綴。vue結尾的文件），日后打包時vue cli會將組件編譯成運行的html文件

4.如何開發Vue腳手架

注意：在Vue cli 中一切皆組件

5、案例

components中（組件中）

<template>

  <div class="hello">

    {{msg}}

    <h2>這是我女朋友楊福君！</h2>

  </div>

</template>

<script>

export default {

  name: 'user',

  data （） {

    return {

      msg: '人物介紹'

    }

  }

}

</script>

router路由

import Vue from 'vue'

import Router from 'vue-router'

import user from '@/components/user'

Vue.use（Router）

export default new Router（{

  routes: [

    {

      path: '/user',

      name: 'User',

      component: user

    }

  ]

}）

app.vue組件

<template>

  <div id="app">

    <img width="600px" src="./assets/logo.jpg">

    <router-link :to="{name:'User'}">展示用戶信息</router-link>

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App'

}

</script>

main.js

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

new Vue（{

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

}）

到此，關于“Vue CLI怎么安裝配置和使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！