1.@vue/cli 腳手架介紹
@vue/cli是Vue官方提供的一個全域模塊包(得到vue命令), 此包用于創建腳手架專案
1.1 @vue/cli的好處
-
開箱即用
0配置webpack
babel支持
css, less支持
開發服務器支持
1.2 @vue/cli安裝
-
全域安裝命令
yarn global add @vue/cli
# OR
npm install -g @vue/cli-
查看
vue腳手架版本
vue -V1.3 @vue/cli 創建專案啟動服務
1.創建專案
# vue和create是命令, vuecli-demo是檔案夾名
vue create vuecli-demo2.選擇模板
3.選擇用什么方式下載腳手架專案需要的依賴包
回車等待生成專案檔案夾+檔案+下載必須的第三方包
4.進入腳手架專案下, 啟動內置的熱更新本地服務器
cd vuecil-demo
yarn serve只要看到綠色的就代表你成功了
按住ctrl點擊localhost地址打開瀏覽器
2.@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 – 依賴包串列檔案3. @vue/cli 專案架構了解
2.2 @vue/cli 自定義配置
專案中沒有webpack.config.js檔案，因為@vue/cli用的vue.config.js
src并列處新建vue.config.js:
/* 覆寫webpack的配置 */
module.exports = {
devServer: { // 自定義服務配置
open: true, // 自動打開瀏覽器
port: 3000
}
}2.3 @vue/cli 單vue檔案講解
Vue推薦采用.vue檔案來開發專案
template里只能有一個根標簽
vue檔案-獨立模塊-作用域互不影響
style配合scoped屬性, 保證樣式只針對當前template內標簽生效
vue檔案配合webpack, 把他們打包起來插入到index.html
<!-- template必須, 只能有一個根標簽, 影響渲染到頁面的標簽結構 -->
<template>
<div>歡迎使用vue</div>
</template>
<!-- js相關 -->
<script>
export default {
name: 'App'
}
</script>
<!-- 當前組件的樣式, 設定scoped, 可以保證樣式只對當前頁面有效 -->
<style scoped>
</style>
最終: Vue檔案配合webpack, 把他們打包起來插入到index.html, 然后在瀏覽器運行
以上就完成了vue的安裝和對基本專案檔案和功能的了解
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/328022.html
標籤：其他