對于剛剛接觸編程的人來說,最難的可能并不是學習一種新語法或者" />

使用webpack搭建vue項目實現腳手架功能

 更新時間:2019-04-17 21:43:13   作者:佚名   我要評論(0)

本文基于node.js開發環境,安裝完node之后新建項目,通過webpack配置,實現vue-cli腳手架功能
對于剛剛接觸編程的人來說,最難的可能并不是學習一種新語法或者

本文基于node.js開發環境,安裝完node之后新建項目,通過webpack配置,實現vue-cli腳手架功能

對于剛剛接觸編程的人來說,最難的可能并不是學習一種新語法或者框架,而是編程思維,這種思維在調試的時候顯得尤為重要,擁有良好的編程習慣和思維能力可以大幅度提高調試效率。而編程思維的培養往往需要經驗的積累,只有把底層原理一遍遍地思考之后,才會有更深入的理解,這也是vue官方文檔中不建議vue初學者直接使用vue-cli的原因之一。

所以今天特意一步步通過webpack配置,實現與vue-cli相同的效果,希望大家能有所收獲。

1. 創建一個vue項目

使用命令行mkdir vuedeom 或者直接新建一個vuedemo空文件夾,然后命令行cd vuedemo,使用npm init -y初始化,此時你會看到文件夾多了一個package.json的文件,內容大致如下:

{
 "name": "vuedemo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

2. 引入webpack

通過npm加載webpack,當然如果速度慢的話你也可以使用淘寶鏡像,npm install -g cnpm –registry=https://registry.npm.taobao.org,然后輸入命令:cnpm install webpack --save-dev

接下來我們在項目根目錄創建一個src文件,有一個main.js,再創建一個webpack.config.js,最后修改package.json的腳本:

const path = require('path') //引入node內置模塊path
module.exports ={
 entry:'./src/main.js',  // 入口文件,把src下的main.js編譯到出口文件
 output:{     //出口文件
  path:path.resolve(__dirname,'dist'), //出口路徑和目錄
  filename:"demo.js"      //編譯后的名稱
 }
}

//package.json
{
 "name": "vuedemo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "build":"webpack" //當使用npm run build的時候就會執行webpack,按照提示安裝webpack-cli
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

3. babel編譯

雖然ES6語法已經廣泛普及,但各個瀏覽器還不是特別兼容,為了避免出錯我們需要把ES6轉成ES5,使用babel進行編譯

npm install --save-dev babel-core babel-loader

加載完成之后,在webpack.config.js配置

const path = require('path')

module.exports ={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
  filename:"demo.js"
 },
 module:{
  rules:[ //遍歷規則
   {
    test: /\.js$/, //匹配以js結尾的文件
    loader:"babel-loader", // 使用babel-loader編譯
    exclude: /node_modules/ //node_module里面的內容不遍歷
   }
  ]
 }
}

我測試的時候出現了這樣的錯誤,如果有相同情況的可以參考下:

Error: Cannot find module '@babel/core'
 [email protected] requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install '[email protected]'.

這是因為版本之間的不兼容,按照上面的要求,你可以安裝低版本的[email protected]

也有可能webpack會發出這樣的警告:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

你需要給腳本配置一個環境,一般build我們會用生產環境webpack --mode production,而dev會使用生產環境webpack --mode development (這個下面會講)

另外,有時候我們可能會遇到不能識別webpack命令,原因未知,不過重新安裝一次就可以了...

接下來需要讓babel-loader翻譯官具有翻譯的功能:

npm install babel-preset-es2015 --save-dev

并且新建一個.babelrc的文件,里面新建

{ "presets":["es2015"] }

如果需要轉譯ES7語法,你還需要安裝

npm install babel-preset-stage-0 --save-dev

同樣在.babelrc添加

{ 
"presets":["es2015"."stage-0"]
}

每次修改配置之后都要重新編譯:npm run build

4. 解析樣式

上面我們實現了vue引入和es6以及es7語法轉譯,現在我們來解析樣式,需要安裝兩個包

npm install css-loader style-loader --save-dev

css-loader將css解析成模塊,style-loader將解析的內容插入到style標簽內

別忘了在配置里webpack.config.json添加規則

rules:[{test:/\.css$/,use:['style-loader','css-loader']}]

但是大多數時候,我們在vue中會使用樣式預處理語言,比如sass、less、stylus,同樣地我們需要安裝對應的包,添加對應的規則

npm install less less-loader --save-dev
rules:[ {test:/\.less$/,use:['style-loader','css-loader','less-loader']}]

5. 解析圖片

圖片是大多數項目不可獲取的部分,怎樣解析圖片呢?和解析樣式步驟差不多,我們需要先安裝包再添加規則

npm install file-loader url-loader --save-dev
rules:[

{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},

{test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'}

]

limit表示轉化base64只在8192字節一下轉化,其他情況輸出圖片

6. 解析html

我們希望build之后能有一個html文件,能直接看到編譯之后的效果

這時就需要一個插件,插件的作用是以我們自己的html為模板將打包后的結果,自動引入到html中產出到dist目錄下

npm install html-webpack-plugin --save-dev

在webpack.config.js引入這個插件

let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 ....省略
 plugins:[new HtmlWebpackPlugin({ //自動插入到dist目錄中
  template:'./index.html' //使用模板
  filename:'login.html'   //產出名稱(一般不寫)
 })]
}

build之后你就可以看到dis下有一個index.html文件

 7. 開發環境

一個項目創建分為開發環境和生產環境(上線),那么在開發的時候每次都需要build很不方便,而且build之后相當于最終的代碼,不能隨意更改,我們需要把這些內容都放到內存中,通過npm run dev打開

npm install webpack-dev-server --save-dev

這里邊內置了服務,可以幫我們啟動一個端口號,當代碼更新時,自動在內存中打包,代碼有變化就重新執行

并且在package.json添加一個新腳本:"dev":"webpack-dev-server --mode development"

一般webpack-dev-server會內置一個端口,通過這個端口就能查看編譯的內容了,比如我的端口號:http://localhost:8080

8. 配置vue

上面我們已經實現了基本的webpack配置,完成了html、css、less、圖片、js等文件的解析,但我們最終想要的適合vue-cli一樣的效果,這就要求我們還要對vue語法進行解析,如果你在main.js引入vue模塊,使用vue時,你會發現控制臺打印這樣的錯誤

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

這是因為默認的vue引用的是vue.runtime.common.js,不能編譯模板,你可以在引入vue的時候直接import Vue from 'vue/dist/vue'

另外一種辦法是,你可以使用render函數,注意render()要有返回值

但是不管是改變vue引用js還是使用render函數都是不方便的,我們更希望頁面組件能以.vue文件加載到html文件中

我們可以通過安裝vue-loader(解析.vue文件)和vue-template-compiler(解析template模板)實現

npm install vue-loader vue-template-compiler --save-dev

之后我們在main.js引入App.vue模塊,然后在render()引用:render:(h)=>h(App)

最后

到這里我們就實現了和vue-cli初始化出來的vue項目一樣的效果,其實整個過程并不算太難,不過一步步實現還是很有幫助,vue初學者可以動手試試。當然,文章可能會有我疏忽的地方,有問題隨時聯系我呀~

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

  • 使用vue-cli腳手架工具搭建vue-webpack項目
  • 腳手架vue-cli工程webpack的基本用法詳解
  • 腳手架vue-cli工程webpack的作用和特點
  • 詳解vue-cli腳手架中webpack配置方法
  • 一步步教你利用webpack如何搭一個vue腳手架(超詳細講解和注釋)
  • 詳解vue2.0腳手架的webpack 配置文件分析
  • 詳解使用vue腳手架工具搭建vue-webpack項目

相關文章

  • JSP狀態管理的簡單介紹

    JSP狀態管理的簡單介紹

    JSP狀態管理的簡單介紹 一 http協議的無狀態性 無狀態性是指:當瀏覽器發送請求給服務器時,服務器響應客戶端請求。 但是當同一個瀏覽器再次發送請求給
    2019-04-17
  • Spring獲取ApplicationContext對象工具類的實現方法

    Spring獲取ApplicationContext對象工具類的實現方法

    Spring獲取ApplicationContext對象工具類的實現方法 (1)實現的工具類: package com.util; import org.springframework.context.ApplicationConte
    2019-04-17
  • Vue渲染過程淺析

    Vue渲染過程淺析

    Vue 推薦在絕大多數情況下使用 template 來創建你的 HTML。但是模板畢竟是模板,不是真實的dom節點。從模板到真實dom節點還需要經過一些步驟 把模板編譯為
    2019-04-17
  • 使用webpack搭建vue項目實現腳手架功能

    使用webpack搭建vue項目實現腳手架功能

    本文基于node.js開發環境,安裝完node之后新建項目,通過webpack配置,實現vue-cli腳手架功能 對于剛剛接觸編程的人來說,最難的可能并不是學習一種新語法或者
    2019-04-17
  • JavaScript+Regex 身份證號碼的正則表達式及驗證詳解

    JavaScript+Regex 身份證號碼的正則表達式及驗證詳解

    簡言 在做用戶實名驗證時,常會用到身份證號碼的正則表達式及校驗方案。本文列舉了兩種驗證方案,大家可以根據自己的項目實際情況,選擇適合的方案。 身份證
    2019-04-17
  • 淺談PHP進程管理

    淺談PHP進程管理

    這篇文章是對之前一篇文章的補充和改進, 創建一個主(master)進程,主進程安裝定時器,每隔5分鐘檢測一次隊列長度,根據隊列長度計算需要的worker進程, 然后創
    2019-04-17
  • DotNetCore深入了解之HttpClientFactory類詳解

    DotNetCore深入了解之HttpClientFactory類詳解

    當需要向某特定URL地址發送HTTP請求并得到相應響應時,通常會用到HttpClient類。該類包含了眾多有用的方法,可以滿足絕大多數的需求。但是如果對其使用不當時
    2019-04-17
  • 詳解linux正則表達式(基礎正則表達式+擴展正則表達式)

    詳解linux正則表達式(基礎正則表達式+擴展正則表達式)

    正則表達式應用非常廣泛,例如:php,Python,java等,但在linux中最常用的正則表達式的命令就是grep(egrep),sed,awk等,換句話 說linux三劍客要想能工作的
    2019-04-17
  • SpringMail使用過程中的報錯解決辦法

    SpringMail使用過程中的報錯解決辦法

    SpringMail使用過程中的報錯解決辦法 1、Unable to locate provider for protocol: smtp –>缺少依賴造成的 <dependency> <groupId>javax.mail</groupI
    2019-04-17
  • 小程序自定義單頁面、全局導航欄的實現代碼

    小程序自定義單頁面、全局導航欄的實現代碼

    需求 產品說小程序返回到首頁不太方便,想添加返回首頁按鈕,UI說導航欄能不能設置背景圖片,因為那樣設計挺好看的。 需求分析并制定方案 這產品和UI都提需求
    2019-04-17

最新評論

黑龙江新11选5开奖结果