vue-cli入門 - 搭建項目打包運行+webpack打包

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。
本文連接：https://blog.csdn.net/qq_38225558/article/details/86302259
前言： 在開發中，須要打包的東西不止是js、css、html。還有更多的東西要處理，這些插件和加載器若是咱們一一去添加就會比較麻煩。然而，vue官方提供了一個快速搭建vue項目的腳手架：vue-cli   使用它能快速的構建一個web工程模板。

官網：https://cli.vuejs.org/

vue-cli入門   （快速的腳手架-快速搭項目的...）

新建模塊 

進入目錄：

 

安裝vue-cli ： npm install -g vue-cli  【注意：有點慢須要等會兒哦...】

 

以下安裝成功！

 

注：若是安裝失敗就刪除C:\Users\Administrator\AppData\Roaming\npm路徑下的node_modules 文件夾，而後從新安裝試下

 

 

vue-cli快速建立webpack項目：vue init webpack

 

而後一路回車，直到安裝路由爲止

 

而後選擇安裝路由，以後的不安裝，而後回車等待安裝便可...

 

等待安裝成功...

 

最後安裝成功以後，就會發現咱們的項目中多出了不少文件...

 

運行：npm run dev

 

而後訪問 http://localhost:8080 ，顯示以下界面

 

npm run build  -->  打包能夠在服務器運行【注意：vue-cli 底層是使用webpack打包！文章最後附有webpack打包有關知識點】

 

執行完此命令後，在項目中會多出dist文件夾

 

而後就能夠將dist文件夾下的文件複製黏貼放到tomcat下面去運行訪問 【注：直接點擊index.html是不能訪問的哦！】

 

 雙擊 啓動tomcat

 

訪問：http://127.0.0.1:8080

 

舒適小提示：可在idea中安裝vue.js插件

 

這樣咱們的.vue文件就會支持提示等功能...

 

下面咱們再來簡單的瞭解一下webpack打包

webpack是什麼?

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

 

從圖中咱們能夠看出，Webpack能夠將多種靜態資源js、css、less轉換成一個靜態文件，減小了頁面的請求

下面簡單的介紹下Webpack 的安裝與使用，由於我是學Java後端的，因此對前端的東西還不是那麼熟... 

安裝

本地安裝：
    npm install webpack --save-dev
    npm install webpack-cli --save-dev
全局安裝：
    npm install -g webpack
    npm install -g webpack-cli

【注意：這2個都要等好久...  由於上面的vue-cli裏面包含了webpack打包，這裏的瞭解下就好...】

 

第一個安裝成功以後以下

 

 

 

簡單使用

打包html，js，css

npm install html-webpack-plugin --save-dev                  
npm install style-loader css-loader  --save-dev
npm install extract-text-webpack-plugin --save-dev

而後新建文件webpack.config.js做配置...

編譯打包 : cnpm run webpack 生成dist文件夾

熱更新web服務器

webpack提供了一個插件，能夠幫咱們運行一個web服務，加載頁面內容，而且修改js後不須要從新加載就能看到最新結果安裝插件：npm install webpack-dev-server --save-dev添加啓動腳本：在package.json中配置script     "scripts": {           "dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"       },--inline：自動刷新--hot：熱加載--port：指定端口--open：自動在默認瀏覽器打開--host：能夠指定服務器的 ip，不指定則爲127.0.0.1npm run dev————————————————版權聲明：本文爲CSDN博主「鄭清」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/qq_38225558/article/details/86302259