vuecli安裝教程（vuecli4安裝）
今天給各位分享vuecli安裝教程的知識，其中也會對vuecli4安裝進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！
本文目錄一覽：
Vue3.x 超詳細安裝教程
npm 或 yarn 安裝
查看版本（是否安裝成功）：
進入demo目錄： cd G:\demo\
創(chuàng)建 my-project 項目： vue create my-project
選擇自己所要集成的配置（格鍵是選中與取消，A鍵是全選，回車確定）
這里我的選擇如下：
配置項：
安裝的 vue-cli 將會是基于 vue3.x 版本
如果在項目中想要保持使用 TypeScript 的 class 風格的話，建議大家選擇y。
這里我選擇： Sass/SCSS（with node-sass）
這里我選擇： ESLint with error prevention only
這里我選擇： Lint on save
這里我選擇： In dedicated config files
cd my-project ( 進入項目根目錄 )
yarn serve ( 啟動項目 )
現(xiàn)在的目錄是 Vue3.x 的 cli 看上去簡潔多了，去掉了 Vue2.x 中 build 和 config 等目錄
在項目的根目錄下新建 vue.config.js 文件（ 是根目錄，不是src目錄 ）
Vue CLI內(nèi)網(wǎng)安裝（禁止運行vue指令解決方案）
1、Vue cli簡介：
Vue cli是一個基于Vue.js 進行快速開發(fā)的完整系統(tǒng)，Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標準化。它確保了各種構(gòu)建工具能夠基于智能的默認配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應(yīng)用上，而不必花好幾天去糾結(jié)配置的問題。與此同時，它也為每個工具提供了調(diào)整配置的靈活性，無需 eject。
cli(@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue命令。它可以通過vue create快速搭建一個新項目，或者直接通過vue serve構(gòu)建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項目。
2、 Vue cli安裝
npm install -g @vue/cli
安裝之后，運行vue指令，遇到以下問題：由于公司內(nèi)網(wǎng)執(zhí)行策略限制，會禁止運行vue指令。
解決方案及步驟如下：
第一步：執(zhí)行Set-ExecutionPolicy RemoteSigned更改執(zhí)行策略。
第二步：如果沒有權(quán)限更改全局的執(zhí)行策略，加上-Scope CurrentUser后再次更改（Set-ExecutionPolicy RemoteSigned -Scope CurrentUser），并為ExecutionPolicy參數(shù)提供值為：RemoteSigned。
第三步：執(zhí)行策略更改完成后，成功運行vue指令。
局部安裝并使用vue-cli(或者其他npm包)
局部安裝并使用vue-cli(或者其他npm包)
新建目錄：mkdir vue-cli2
切換目錄：cd?vue-cli2
初始化項目：npm init -y
安裝：npm i vue-cli
查看版本：npx vue -V
使用：npx vue init webpack project
補充：
安裝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起項目步驟
一、 安裝 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)建項目
1、在硬盤中找一個放項目的文件夾
2、在文件夾下打開命令盤，輸入命令
Vue-Project是我們自己設(shè)置的項目名稱，項目名稱不能用中文
?????? 命令：vue init webpack Vue-Project
3、進入項目工程目錄
4、安裝項目所需依賴??npm install
5、安裝 vue 路由模塊 vue-router 和網(wǎng)絡(luò)請求模塊 vue-resource
??????? 命令：npm install vue-router vue-resource --save
創(chuàng)建完成的項目目錄，如下圖
各個目錄的作用
最后一步啟動項目
???????? 命令：npm run dev
啟動成功，打開瀏覽器8080窗口，頁面如圖所示
關(guān)于vue create 和vue init webpack的區(qū)別 ？
vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板選項可自由配置，創(chuàng)建出來的是vue-cli3的項目，與cue-cli2項目結(jié)構(gòu)不同，配置方法不同，具體配置方法參考官方文檔 網(wǎng)頁鏈接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板來初始化項目，webpack是官方推薦的標準模板名。vue-cli2.x項目向3.x遷移只需要把static目錄復(fù)制到public目錄下，老項目的src目錄覆蓋3.x的src目錄(如果修改了配置，可以查看文檔，用cli3的方法進行配置)
或
另一種：
vuecli安裝教程的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于vuecli4安裝、vuecli安裝教程的信息別忘了在本站進行查找喔。
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請注明出處。
