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。