vue組件化項目搭建及編譯打包發(fā)布

• 引言
• 開發(fā)環(huán)境
• • 開發(fā)環(huán)境介紹
  • 開發(fā)環(huán)境安裝
• 使用模板創(chuàng)建項目
• 編譯及打包發(fā)布

引言

最近開始學習Vue，Vue 是一個前端框架，特點是數(shù)據(jù)綁定和組件化。網(wǎng)上很多教程，數(shù)據(jù)綁定和組件學習起來也都不困難，但是當我學習到組件化的時候，開始有點懵逼了。

組件化指的是頁面上的任何內(nèi)容都可以保存為.vue的單獨文件，里面包含了該組件的html結構，js腳本和css樣式，像樂高積木一樣通過互相引用而組裝起來。概念其實并不難理解，網(wǎng)上也很多教程能夠讓我們搭建起一個簡單的應用，甚至修改模板文件，最后使用npm run dev讓我們的應用運行起來。

這就讓我有點懵逼了，vue是前端js，學習的時候引入vue.js就可以，不應該依賴這樣或那樣的運行環(huán)境，總不能讓我開發(fā)好了應用后再去服務器上安裝一堆運行環(huán)境，然后再輸入npm run dev讓程序跑起來吧。

所以最后還是去認認真真的讀了官方文檔和新手入門，vue的組件化需要編譯打包成js，這樣就瞬間釋然了。

開發(fā)環(huán)境

開發(fā)環(huán)境介紹

推薦的開發(fā)環(huán)境有Homebrew、Node.js、npm、webpack、vue-cli、Atom，當初安裝網(wǎng)上教程搭建vue應用時也是一路安裝過去，很多東西都不是很了解，其實也不用了解太多 -。- （我用的是Windows，目前只用到了下面這些開發(fā)環(huán)境。關于如何搭建開發(fā)環(huán)境和vue項目網(wǎng)上很多教程，這里就不詳細說了，只做個簡單記錄）

Node.js ：JavaScript的運行環(huán)境，這個是基礎
npm ：Nodejs下的包管理器，類似于Mac下的Homebrew，webpack和vue-cli都是通過npm來安裝和更新的
webpack：Vue的組件都是以 .vue 形式存在的單文件，無法被客戶端的瀏覽器解析，用于翻譯和打包成 .js 文件
vue-cli ：用來生成模板的vue工程

開發(fā)環(huán)境安裝

• 安裝 Node.js
  首先從官網(wǎng)下載并安裝Node.js，一路 next 就好。
  安裝好之后在命令行工具中輸入 node -v 查看Node.js的版本，如果提示錯誤則需要手動添加環(huán)境變量（自行百度）。
• 安裝 npm 包管理器
  npm是集成在Node.js中的，輸入 npm - v 查看npm版本信息
• 安裝 cnpm
  由于npm有些資源被屏蔽的問題，所以需要安裝國內(nèi)鏡像cnpm
  輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 等待安裝
• 安裝 vue-cli 構建工具
  輸入 npm install vue-cli -g 等待安裝
• 安裝 webpack 編譯打包工具
  輸入 cnpm install webpack- g 等待安裝，這里使用了國內(nèi)鏡像安裝
• 查看安裝信息
  輸入 npm list -g 查看全局安裝包，
  或 npm list vue-cli -g 查看vue-cli安裝包，如果顯示 -- (empty) 則表示沒有此包

使用模板創(chuàng)建項目

使用 cd 目錄路徑 轉到存放項目的目錄下，使用 vue init webpack 或 vue init webpack-simple 創(chuàng)建工程

D:\wwwroot>vue init webpack-simple 工程名字<工程名字不能用中文>或者創(chuàng)建 vue1.0 的項目 D:\wwwroot>vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

接下來會是一些初始化的設置，不清除什么意思的可以一路回車默認下去（我現(xiàn)在也只能搞懂一部分），官方有一些解釋

Target directory exists. Continue? (Y/n)直接回車默認(然后會下載vue2.0模板，這里可能需要連代理)
Project name (vue-test)直接回車默認
Project description (A Vue.js project) 直接回車默認
Author 寫你自己的名字

全部確認好之后會開始下載并生成模板工程，完成之后會出現(xiàn)提示信息，告訴你接下來該怎么做，這里分兩種情況
我們在創(chuàng)建工程的時候提到過兩種命令 vue init webpack 和 vue init webpack-simple 前者是完全的，后者是簡單的

• vue init webpack
  提示信息如下，意思是轉到vue目錄，輸入 npm run dev 運行程序

To get started:cd vuenpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

• vue init webpack-simple
  提示信息如下，意思是轉到vue-simple目錄，輸入 npm install 安裝依賴源，輸入 npm run dev 運行程序

To get started:cd vue-simplenpm installnpm run dev

最后運行npm run dev，編譯過程和結果兩者也略有不同，大家可以自己去比較一下，不過最終實現(xiàn)的效果是一樣的，如下圖

至此，大家就可以自己去測試和定制各種組件了，使用vue組件搭建網(wǎng)頁應用

編譯及打包發(fā)布

輸入 npm run build 進行打包發(fā)布，編譯完成后會在項目目錄下生成 dist 文件夾，
根據(jù)創(chuàng)建項目命令不同（ vue init webpack 和 vue init webpack-simple ），編譯后的文件組成形式也不一樣

• 使用 vue init webpack 創(chuàng)建的項目，dist文件夾中包含 index.html、 js 和 css文件
• 使用 vue init webpack-simple 創(chuàng)建的項目，dist文件夾中只有 build.js，index.html 文件為項目目錄下的index.html

總結

以上是生活随笔為你收集整理的如何使用vue组件搭建网页并打包发布的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。