============前言==============
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-->終止服務
========================================================