vue教程3-webpack搭建項目

vue-cli

https://cli.vuejs.org/zh/

vue-cli是vue的命令行工具，對於創建項目，安裝各種組件，運行項目都極為方便，是在開發vue中的必備工具

 

vue-cli基於nodejs，所以要先安裝nodejs。從nodejs官網下載二進制包，然后把nodejs的bin目錄加到系統PATH，這樣就由全局的npm命令可以調用了。

npm install -g @vue/cli
#安裝vue-cli

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install @vue/cli -g
#或者用淘寶源

　　

# vue --version
3.6.2
#安裝完后，出現vue命令

　　

vue init

搭建項目的第一步就是初始化目錄，需要使用init，先安裝

cnpm install -g @vue/cli-init

　　

webpack

webpack是一個模塊加載和打包工具，通過使用CommonJS語法把所有瀏覽器需要的靜態資源做相應的准備，比如合並、打包。

它有loader和plugin機制。

loader用於載入各樣靜態資源，不只是js腳本，還有css-loader，style-loader

plugin對整個流程進行控制。

vue中也有vue-loader，用於把.vue文件轉換成webpack包，和整個打包過程融合起來。

 

如果在本地創建一個簡易項目時，一般使用webpack

git地址：https://github.com/vuejs-templates/webpack

使用webpack創建一個名為vue-test的項目

cnpm install -g @vue/cli-init
vue init webpack vue-test
cd vue-test/
npm run dev
#安裝init包，
#初始化一個環境，取名vue-test，es，unit test，e2e包先不裝，其他選項默認
#運行環境，然后就會由node起一個服務

-->
 DONE  Compiled successfully in 4722ms      

 I  Your application is running here: http://localhost:8081

　　

webpack-simple項目目錄

webpack初始化的項目東西還是不少的，這里初始化一個webpack-simple，這個項目模板十分適合初學。

├─.babelrc		// babel配置文件
├─.gitignore	
├─index.html		// 主頁
├─package.json		// 項目配置文件
├─README.md  
├─webpack.config.js	// webpack配置文件
├─dist			// 發布目錄
│   ├─.gitkeep       
├─src			// 開發目錄	
│   ├─App.vue		// App.vue組件
│   ├─main.js		// 預編譯入口

　　

package.json是vue項目的依賴管理文件，運行npm install時，就會安裝這里的包

webpack.config.js是編譯配置文件，采用了CommonJS的寫法，entry節點配置了編譯入口，output節點配置了輸出

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
   ...
}
#這段entry和output配置的含義是：編譯src/main.js文件，然后輸出到dist/build.js文件。
#，執行npm run dev命令后，使用開發環境的話，在dist目錄下不會生成build.js文件，開發環境下build.js是在運行內存中的

　　

npm run dev
#運行開發者環境，不會生成dist/build.js
#開發者環境，nodejs會自己起一個web服務
npm run build
#運行生產環境，生成dist/build.js和壓縮文件build.js.map
#生產環境，需要服務器提供nginx這樣的http服務

　　

webpack項目目錄

初始化一個webpack項目模板，目錄結構更復雜些。

在simple中，只有一個單一的App.vue，所有功能都在這里面。在webpack中，src目錄下有了components目錄，布局組件放在其中。

build后，dist目錄下，把所有靜態資源做了整合。

 

 

自動渲染

在dev環境下，webpack會監聽src目錄下的改動，有改動就會重新渲染

如果改了build和config的內容，則要手動重啟node。