今天給各位分享vuecli安裝教程的知識，其中也會對vuecli4安裝進(jìn)行解釋，如果能碰巧解決你現(xià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 將會是基于 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 ( 啟動項(xiàng)目 )

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

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

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

1、Vue cli簡介：

Vue cli是一個基于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é)配置的問題。與此同時，它也為每個工具提供了調(diào)整配置的靈活性，無需 eject。

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

2、 Vue cli安裝

npm install -g @vue/cli

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

解決方案及步驟如下：

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

第二步：如果沒有權(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

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

npm uninstall vue-cli -g

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

一、 安裝 node.js

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

二、安裝webpack

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

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

三、安裝 vue-cli

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

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

???????????? 如果提示無法識別 vue，可能是 npm 版本過低，可使用 npm install -g npm 來更新版本

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

1、在硬盤中找一個放項(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ò)請求模塊 vue-resource

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

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

各個目錄的作用

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

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

啟動成功，打開瀏覽器8080窗口，頁面如圖所示

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

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板選項(xiàng)可自由配置，創(chuàng)建出來的是vue-cli3的項(xiàng)目，與cue-cli2項(xiàng)目結(jié)構(gòu)不同，配置方法不同，具體配置方法參考官方文檔 網(wǎng)頁鏈接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板來初始化項(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安裝教程的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于vuecli4安裝、vuecli安裝教程的信息別忘了在本站進(jìn)行查找喔。