【VUE】2.搭建vue腳手架@vue/cli,新建第一個vue項目


 

============前言==============

1.vue腳手架參考指南:https://cli.vuejs.org/guide/installation.html

2.vue指導教程:https://cn.vuejs.org/v2/guide/index.html

3.vue  API文檔:https://cn.vuejs.org/v2/api/

============正文=============

一.安裝VUE CLI【vue-cli 或者 @vue/cli】腳手架

1.准備工作

vue腳手架,3.0版本下程序包為 vue-cli

vue腳手架,3.0版本上程序包為@vue/cli

如果vue-cli已全局安裝了以前的(1.x或2.x)軟件包,則需要先使用npm uninstall vue-cli -g或卸載它yarn global remove vue-cli

 

檢查node版本,VUE CLI搭建,要求node版本需要大於等於 8.9

 

 

 

2.安裝腳手架【基於3.0以上】

npm install -g @vue/cli

或使用 cnpm,速度更快

 

 

 

 

查看版本

vue --version 或 vue -V

 

 

 

 

3.如果想升級 VUE CLI,使用如下命令

npm update -g @vue/cli

或 cnpm 速度更快

 

 

 

4.安裝全局插件

cnpm install -g @vue/cli @vue/cli-service-global

 

 

 

 

二.創建第一個VUE項目【三種方式任選其一,開發者可以直接看第三種方式】

【1.當然,不管哪種方式,前提都是Node.js和VUE CLI 都安裝成功的情況】

【2.項目名不能有大寫字母出現,否則創建失敗,可以小寫字母-小寫字母-數字,通過中划線連接】

 

第一種方式

1.創建一個VUE項目的 第一種方式 GUI

GUI方式即 通過圖形界面來創建和管理項目

參考地址:https://blog.csdn.net/qq_28988969/article/details/104472205?fps=1&locationNum=2

打開GUI圖形界面

vue ui

 

 

 

 

 

 

 

第二種方式

 

2.創建一個VUE項目的 第二種方式 命令行

命令行,即正常在cmd 或 Git Bash 使用vue命令創建。

參考地址:https://www.cnblogs.com/zzhqdkf/p/12367571.html

 

注意1:使用命令行方式創建項目,需要使用CMD,因為Git Bash不能友好支持以下的命令。

先進入你想要創建項目所在的目錄

 

 

再輸入命令創建 自定義項目 my-first-vue-1

vue create my-first-vue-1

 

 

選擇默認自動模式,則會自動下載依賴,創建項目完成在你當前的 目錄下。

選擇手動選擇模式,則需要你一步一步選擇自己需要的項,最終完成項目創建。[這里不詳述,可以參考上面的鏈接文章]

 

這里選擇 默認自動模式,手動模式在一和三的方式中都可以體現出來。

 

 默認自動模式創建完成如下

 

 

接下來,進入新創建項目根目錄,然后 鍵入 npm run serve 啟動項目

 

 

訪問啟動的項目

 

 

查看vue-devtools調試工具的工作狀態

 

 

 

終止服務

 

 

查看項目結構

 

 

 

 

 

 

 

第三種方式

 3.創建一個VUE項目的 第三種方式 IDE(WebStrom)

使用任意一種支持良好的IDE,即可創建vue.js的項目,例如webStrom.

 

1-->創建項目

 

 

 

 

這里注意 TypeScript 和 JavaScript的區別

 

 

 

 

 

 

 

 

 

 

 

 

 

2-->編譯項目

創建完成后,在WebStrom打開項目,並執行命令進行編譯

npm run build

編譯完成后,就會在目錄下出現 dist編譯目錄

 

 

 

3-->啟動項目

執行命令啟動項目

npm run serve

 

 

 

4-->訪問項目

 

 

 

 

 

 

5-->終止服務

 

 

========================================================

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM