?由于我們用webpack自己配置環境很麻煩，需要下載很多包,因此我們可以下載@vue/cli包,直接用vue命令創建腳手架專案；
?那么創建@vue/cli腳手架的好處是什么呢？
?可以0配置webpack；babel支持；css、less支持；開發服務器支持；
?那接下來我們來講講腳手架是如何安裝的：
?目標: 把@vue/cli模塊包按到全域, 電腦擁有vue命令, 才能創建腳手架工程
步驟一：安裝腳手架：
1、全域安裝命令：
yarn global add @vue/cli # OR npm install -g @vue/cli注意: 如果半天沒動靜(95%都是網速問題), 可以ctrl c （停止重新來 or 換個網重新來）
2、安裝好之后可以查看vue腳手架的版本：
vue -V總結: 如果出現版本號就安裝成功, 否則失敗；
例如：
步驟二：@vue/cli創建專案啟動服務
?注意：專案名不能帶大寫字母、中文和特殊符號（重要）
1、創建專案：
# vue和create是命令, vuecli-demo是檔案夾名 vue create vuecli-demo2、選擇模板：
可以上下箭頭選擇, 弄錯了ctrl+c重來
選擇用什么方式下載腳手架專案需要的依賴包
3、回車等待生成專案檔案夾+檔案+下載必須的第三方包們
4、進入腳手架專案下, 啟動內置的熱更新本地服務器
cd vuecil-demo npm run serve # 或 yarn serve只要看到綠色的 - 啊. 你成功了(底層node+webpack熱更新服務)
打開瀏覽器輸入上述地址 (或者按住ctrl鍵點擊上述地址，也可直接打開瀏覽器)（"http://localhost:8080/"）
步驟三：@vue/cli 目錄和代碼分析
我們創建好一個專案之后，打開會發現給我們生成了很多的檔案夾，那這些檔案夾都是干什么的？
vuecil-demo # 專案目錄 ├── node_modules # 專案依賴的第三方包 ├── public # 靜態檔案目錄 ├── favicon.ico# 瀏覽器小圖示 └── index.html # 單頁面的html檔案(網頁瀏覽的是它) ├── src # 業務檔案夾 ├── assets # 靜態資源 └── logo.png # vue的logo圖片 ├── components # 組件目錄 └── HelloWorld.vue # 歡迎頁面vue代碼檔案 ├── App.vue # 整個應用的根組件 └── main.js # 入口js檔案 ├── .gitignore # git提交忽略配置 ├── babel.config.js # babel配置 ├── package.json # 依賴包串列 ├── README.md # 專案說明 └── yarn.lock # 專案包版本鎖定和快取地址主要檔案及含義：
node_modules // 下都是下載的第三方包 public/index.html // 瀏覽器運行的網頁 src/main.js – // webpack打包的入口檔案 src/App.vue – // vue專案入口頁面 package.json – // 依賴包串列檔案
步驟四：@vue/cli 專案架構了解
?目標: 知道專案入口, 以及代碼執行順序和引入關系
總結：
??? main.js和App.vue，以及index.html作用和關系？
?1、main.js - 專案打包主入口 - Vue初始化；
?2、App.vue - Vue頁面主入口；
?3、index.html - 瀏覽器運行的檔案；
?4、App.vue => main.js => index.html
步驟五：@vue/cli 自定義配置
?目標：專案中沒有webpack.config.js檔案，因為@vue/cli用的vue.config.js
src并列處新建vue.config.js：
/* 覆寫webpack的配置 */ module.exports = { devServer: { // 自定義服務配置 open: true, // 自動打開瀏覽器 port: 3000 // 自定義埠號 } }
步驟六：@vue/cli 單vue檔案講解
?單vue檔案好處, 獨立作用域互不影響
創建好專案之后會發現我們有一個src/App.vue的檔案夾(如下圖：)
打開App.vue之后可以看到代碼的結構如下、：
<!-- template必須, 只能有一個根標簽, 影響渲染到頁面的標簽結構 --> <template> <div>歡迎使用vue</div> </template> <!-- js相關 --> <script> export default { name: 'App' } </script> <!-- 當前組件的樣式, 設定scoped, 可以保證樣式只對當前頁面有效 --> <style scoped> </style>? Vue推薦采用.vue檔案來開發專案
? template里只能有一個根標簽；
? vue檔案-獨立模塊-作用域互不影響；
? style配合scoped屬性, 保證樣式只針對當前template內標簽生效；
? vue檔案配合webpack, 把他們打包起來插入到index.html，然后在瀏覽器運行 ；
步驟七：@vue/cli 歡迎界面清理
? 我們開始寫我們自己的代碼, 無需歡迎頁面；
1、src/App.vue默認有很多內容, 可以全部洗掉留下框：
如下圖：
2、assets 和 components 檔案夾下的一切都洗掉掉 (不要默認的歡迎頁面)
到這里vue專案檔案夾就創建好啦，我們就可以在里面開始寫自己專案了！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/341901.html
標籤：其他