vue+webpack打造todo應用

時間 2019-11-17

標籤 vue+webpack vue webpack 打造 todo 應用简体版

原文原文鏈接

項目搭建文檔(每步代碼配置帶有詳細註釋)

線上展現:http://118.24.144.217/
項目地址:github.com/Jasonccj/vu…
博客地址:juejin.im/post/5c26e9…
慕課地址:www.imooc.com/learn/935css

1.vue+webpack項目工程配置

因爲本代碼是採用webpack3.10.0. 與webpack4.x有不少差別性,夥伴們不要由於版本問題而停滯不前
具體版本能夠在package.json中查看,具體細節都有超詳細註釋,歡迎小夥伴們提出寶貴的意見,一塊兒交流,讓咱們一塊兒提升咱們的前端技能html

1.1 項目基本配置

npm init 初始化一個npm項目
npm i webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0 安裝webpack和vue,使用vue要安裝vue-loader
npm i css-loader@0.28.7 vue-template-compiler@2.5.13 根據終端WARN提示安裝css-loader,由於vue-loader依賴css-loader //針對各版本作了詳細指定,因爲更新過快,避免版本差別性問題,故指定了版本前端

在app.vue中書寫基本的vue結構vue

首先在webpack.config.js設置入口entry
聲明咱們的入口文件index.jslinux

示例中app.vue實際是一個組件,組件是不能直接掛載到咱們的html中去,須要在index.js中掛載webpack

webpack.config.js一樣設置出口文件bundle.js及存放路徑git

配置完後,在webpack.config.js中配置build腳本, --config 指定咱們的config文件由於在這裏面寫,當你調用時纔會調用這個項目裏面的webpack,不然將會調用全局的webpack,全局webpack和項目中的版本可能存在差別,建議使用這種方式會好一點github

1.2 各類靜態資源的加載

webpack對其餘類型的文件處理,可在配置文件中配置rules規則.
一樣根據配置中的處理的loader都要安裝.
npm i style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6web

stylus的css預處理器 npm i stylus-loader@3.0.1 stylus@0.54.5
同理其餘的像sass,less等其餘的預處理器均可以相似的方法去使用npm

1.3 webpack-dev-server的配置

npm i webpack-dev-server@2.9.1
webpack-dev-server在開發環境中會給咱們帶來與webpack不同的效果,用的都是同一個配置文件

"build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
複製代碼

同一個配置文件,那麼其中必然會根據一個環境變量判斷,來判斷是開發環境仍是正式環境
NODE_ENV就是這個環境變量,在linux下直接NODE_ENV=production,在windows環境下須要set NODE_ENV=production,解決這種跨平臺設置的差別性,咱們能夠安裝cross-env@5.1.3
npm i cross-env@5.1.3

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
複製代碼

在webpack.config.js配置好咱們的測試環境後,咱們還須要引入一個html-webpack-plugin,用於將咱們打包好後的js融入到咱們的HTml中去
npm i html-webpack-plugin@2.30.1
完成webpack.config.js中後,你即可以使用npm run dev見證奇蹟的時刻了