vue-cli 腳手架
- 參考網站：https://cli.vuejs.org/zh/guide/
- npm i @vue/cli -g 或者 yarn global add @vue/cli 下載vue腳手架(一般安裝在全局)
- 安裝成功後，全局環境下會生成一個 vue的可執行命令， vue --version查看版本號
- 腳手架：幫助我們把webpack等相關配置都處理好，我們只需要基於腳手架快速構建一個項目即可（項目中一定包含webpack的相關設置）
一、創建並配置腳手架以及其的使用
- 創建項目：vue create 文件夾名（項目名）
![image.png]()
- 選擇預調：
![image.png]()
- 第一項爲曾經的配置好的選項，保留下來的
- 第二項爲默認設置，包含了babel和eslint;
- 第三項爲手動選擇，可以手動選擇自己需要的插件（因爲前兩項點了確定就可以完成配置，所以下面只展示第三項手動選擇）
- **選擇插件配置： **
![image.png]()
- 按上下箭頭選擇配置，空格鍵選中,選擇完成後，回車鍵繼續，會依次問詢你所選插件的配置
- 選擇vue-router是否使用歷史路由
![image.png]()
- 選擇css預處理語言
![image.png]()
- 選擇代碼風格和格式校驗
![image.png]()
- 選擇代碼校驗方式
![image.png]()
- 選擇方式和第二步（選擇預調）相同
- 設置在哪裏保存插件的配置
![image.png]()
- 第一個選擇爲創建一個獨立文件
- 第二個爲創建爲package.json文件（配置文件，用npm install下載）
- 選擇是否保存爲一個將來可複用的preset
![image.png]()
- 如果選擇是，下來就得起一個名字
- 選擇完畢開始安裝插件
- 啓動項目：cd + 第一步起的項目名（文件夾名）進入文件夾，然後輸入npm run serve 或者 yarn serve 啓動項目，會生成如圖的地址
![image.png]()
，將地址輸入瀏覽器的地址欄即可
，將地址輸入瀏覽器的地址欄即可二、腳手架創建的文件夾
- **eslint **: 代碼校驗，校驗代碼的格式是否正確，規範，控制縮進
- gitignore : git忽略
- babel.config.js : 配置es6
- package.json : 項目配置文件
- **readme.md **: 對當前項目進行一個解釋
- vue.config.js : 這個是該項目的配置文件；比如配置webpack，配置跨域都在這裏配置
- **yarn.lock **: 和package.json有點類似
- eslintrc.js : eslint配置文件
- src : 資源文件，咱們代碼都是寫在這個裏面的
- assets : 靜態資源文件，一般放圖片和一些css
- components : 組件，頁面的一部分
- router : 配置的路由
- store : vuex倉庫
- **views **: 頁面級組件
- **App.vue **: 只有一個，所有的組件的入口文件
- main.js : 是webpack打包的入口文件（可以在main.js配置一些全局的組件，filter過濾器，或指令，全局的路由鉤子函數）
- public : webpack打包之後最後要插入到這個HTML文件中
- node_moduless : 安裝的依賴模塊
- **dist **: 文件夾是在yarn build 產生的，是上線之前需要把當前整個項目進行打包之後的文件
<body>
<script>
// npm install @vue/cli
// vue create
// cd ../ mkdir aa
// git add . git commit git push
// npm install vuex --save
// vue create admin
// npm install nrm --save
// 切換源：nrm use taobao;
// npm install vue-cli -g; npm webpack init aaa;
// 自動化生成一個vue的項目 vue create 項目名 node webpack
// eslint ：代碼校驗，校驗代碼的格式是否正確;規範；控制鎖縮進；
// gitignore : git忽略
// babel.config.js : 配置es6
// package.json : 項目配置文件
// readme.md :對當前項目進行一個解釋
// vue.config.js : 這個是該項目的配置文件；比如配置webpack，配置跨域都在這裏配置
// yarn.lock : 和package.json有點類似；
// eslintrc.js:eslint配置文件
// src : 資源文件，咱們代碼都是寫在這個裏面的
// public : webpack打包之後最後要插入到這個HTML文件中
// node_modules : 安裝的依賴模塊
// dist : 文件夾是在yarn build 產生的，是上線之前需要把當前整個項目進行打包之後的文件；
let fn = () => {
}
let a = 100;
let c = 300;
// 生產環境和開發環境
</script>
</body>
- 開發模式下，我們基於這個命令啓動一個本地服務，把基於 webpack 編譯後的內容預覽
$ npm run serve - 生產模式下，把寫好的內容進行編譯打包，最後部署到服務器上
$ npm run build
<title></title>
<!--
直接在這裏引入的時候，我們導入的資源最好都設置爲 <%= BASE_URL %> 這種方式，因爲這樣寫的 webpack
會幫我們進行編譯處理
-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>reset.min.css">
三、vue-cli的一點深入研究
$ vue inspect 查看當前項目默認的 webpack 配置信息
$ vue create
$ vue add [plugin] 在當前項目中安裝插件
…
默認的配置項中已經把 less / sass 等規則寫好了，如果我們的項目中需要使用 less，無需配置規則，只需要安裝對應的模塊和加載器即可
$ yarn add less less-loader -D
<script>
import './xxx/xxx.less';
</script>
<style lang='less'>
//...
</style>
1. 修改默認的webpack配置
需要在根目錄中設置 vue.config.js
2. 實現組件之間信息通信的方式
- props 父->子
- emit 子<->父 擁有共同父親的兄弟 隔代處理
- children|$refs)
- provide/inject 隔代處理
- attrs
3. vuex能處理任何情況下的組件信息通信
前提：SPA 單頁面（實現的是同一個頁面中，各組件的信息通信）
vuex:vue 中實現公共狀態管理的插件
四、Vue.config
vue.config 配置預覽
module.exports = {
// process.env.NODE_ENV：環境變量中存儲的是開發環境還是生產環境
publicPath: process.env.NODE_ENV === 'production' ? 'http://www.zhufengpeixun.cn/' : '/',
// outputDir
// 自定義目錄名稱，把生成的 JS / CSS / 圖片等靜態資源放置到這個目錄中
assetsDir: 'assets',
// 關閉生產環境下的資源映射（生產環境下不在創建 xxx.js.map 文件）
productionSourceMap: false,
// 設置一些 webpack 配置項，用這些配置項和默認的配置項合併
configureWebpack: {
plugins: []
},
// 直接去修改內置的 webpack 配置項
chainWebpack: config => {
// config:原始配置信息對象
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 200 * 1024;
return options;
});
},
// 修改 webpack-dev-server 配置（尤其是跨域代理）
devServer: {
proxy: {
// 請求地址 /user/add
// 代理地址 http://api.zhufengpeixun.cn/user/add
"/": {
changeOrigin: true,
target: "http://api.zhufengpeixun.cn/"
}
}
},
// 多餘1核 cpu 時：啓動並行壓縮
parallel: require('os').cpus().length > 1
}