今天給各位分享vuecli安裝教程的知識(shí)，其中也會(huì)對(duì)vuecli4安裝進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、Vue3.x 超詳細(xì)安裝教程
• 2、Vue CLI內(nèi)網(wǎng)安裝（禁止運(yùn)行vue指令解決方案）
• 3、局部安裝并使用vue-cli(或者其他npm包)
• 4、vue-cli起項(xiàng)目步驟

Vue3.x 超詳細(xì)安裝教程

npm 或 yarn 安裝

查看版本（是否安裝成功）：

進(jìn)入demo目錄： cd G:\demo\

創(chuàng)建 my-project 項(xiàng)目： vue create my-project

選擇自己所要集成的配置（格鍵是選中與取消，A鍵是全選，回車確定）

這里我的選擇如下：

配置項(xiàng)：

安裝的 vue-cli 將會(huì)是基于 vue3.x 版本

如果在項(xiàng)目中想要保持使用 TypeScript 的 class 風(fēng)格的話，建議大家選擇y。

這里我選擇： Sass/SCSS（with node-sass）

這里我選擇： ESLint with error prevention only

這里我選擇： Lint on save

這里我選擇： In dedicated config files

cd my-project ( 進(jìn)入項(xiàng)目根目錄 )

yarn serve ( 啟動(dòng)項(xiàng)目 )

現(xiàn)在的目錄是 Vue3.x 的 cli 看上去簡(jiǎn)潔多了，去掉了 Vue2.x 中 build 和 config 等目錄

在項(xiàng)目的根目錄下新建 vue.config.js 文件（ 是根目錄，不是src目錄 ）

Vue CLI內(nèi)網(wǎng)安裝（禁止運(yùn)行vue指令解決方案）

1、Vue cli簡(jiǎn)介：

Vue cli是一個(gè)基于Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應(yīng)用上，而不必花好幾天去糾結(jié)配置的問(wèn)題。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無(wú)需 eject。

cli(@vue/cli) 是一個(gè)全局安裝的 npm 包，提供了終端里的 vue命令。它可以通過(guò)vue create快速搭建一個(gè)新項(xiàng)目，或者直接通過(guò)vue serve構(gòu)建新想法的原型。你也可以通過(guò)vue ui通過(guò)一套圖形化界面管理你的所有項(xiàng)目。

2、 Vue cli安裝

npm install -g @vue/cli

安裝之后，運(yùn)行vue指令，遇到以下問(wèn)題：由于公司內(nèi)網(wǎng)執(zhí)行策略限制，會(huì)禁止運(yùn)行vue指令。

解決方案及步驟如下：

第一步：執(zhí)行Set-ExecutionPolicy RemoteSigned更改執(zhí)行策略。

第二步：如果沒(méi)有權(quán)限更改全局的執(zhí)行策略，加上-Scope CurrentUser后再次更改（Set-ExecutionPolicy RemoteSigned -Scope CurrentUser），并為ExecutionPolicy參數(shù)提供值為：RemoteSigned。

第三步：執(zhí)行策略更改完成后，成功運(yùn)行vue指令。

局部安裝并使用vue-cli(或者其他npm包)

局部安裝并使用vue-cli(或者其他npm包)

新建目錄：mkdir vue-cli2

切換目錄：cd?vue-cli2

初始化項(xiàng)目：npm init -y

安裝：npm i vue-cli

查看版本：npx vue -V

使用：npx vue init webpack project

補(bǔ)充：

安裝vue-cli3.x：npm i @vue/cli@3

使用：npx vue create project

vue-cli全局安裝：npm install vue-cli -g

vue-cli的版本查看：vue -V

vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安裝命令安裝的并不是最新版的3.0+的，而如果安裝3.0的話就需要使用新的：

npm install @vue/cli -g

如果原來(lái)已經(jīng)安裝了vue-cli的話需要先卸載原來(lái)的安裝：

npm uninstall vue-cli -g

vue-cli起項(xiàng)目步驟

一、 安裝 node.js

安裝完成后，可以命令行工具中輸入?node -v?和?npm -v，如果能顯示出版本號(hào)，就說(shuō)明安裝成功。

二、安裝webpack

???????????? 命令：npm install webpack -g

???????????? 安裝完成后使用webpack -v，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。

三、安裝 vue-cli

???????????? 命令：npm install -g vue-cli

???????????? 安裝完成后，可以使用?vue -V?（注意 V 大寫）查看是否安裝成功。

???????????? 如果提示無(wú)法識(shí)別 vue，可能是 npm 版本過(guò)低，可使用 npm install -g npm 來(lái)更新版本

四、使用vue-cli來(lái)構(gòu)建項(xiàng)目

1、在硬盤中找一個(gè)放項(xiàng)目的文件夾

2、在文件夾下打開命令盤，輸入命令

Vue-Project是我們自己設(shè)置的項(xiàng)目名稱，項(xiàng)目名稱不能用中文

?????? 命令：vue init webpack Vue-Project

3、進(jìn)入項(xiàng)目工程目錄

4、安裝項(xiàng)目所需依賴??npm install

5、安裝 vue 路由模塊 vue-router 和網(wǎng)絡(luò)請(qǐng)求模塊 vue-resource

??????? 命令：npm install vue-router vue-resource --save

創(chuàng)建完成的項(xiàng)目目錄，如下圖

各個(gè)目錄的作用

最后一步啟動(dòng)項(xiàng)目

???????? 命令：npm run dev

啟動(dòng)成功，打開瀏覽器8080窗口，頁(yè)面如圖所示

關(guān)于vue create 和vue init webpack的區(qū)別 ？

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板選項(xiàng)可自由配置，創(chuàng)建出來(lái)的是vue-cli3的項(xiàng)目，與cue-cli2項(xiàng)目結(jié)構(gòu)不同，配置方法不同，具體配置方法參考官方文檔 網(wǎng)頁(yè)鏈接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板來(lái)初始化項(xiàng)目，webpack是官方推薦的標(biāo)準(zhǔn)模板名。vue-cli2.x項(xiàng)目向3.x遷移只需要把static目錄復(fù)制到public目錄下，老項(xiàng)目的src目錄覆蓋3.x的src目錄(如果修改了配置，可以查看文檔，用cli3的方法進(jìn)行配置)

或

另一種：

vuecli安裝教程的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vuecli4安裝、vuecli安裝教程的信息別忘了在本站進(jìn)行查找喔。