vue.js 2.*項目環境搭建、運行、打包發布的詳細步驟

Vue 安裝

vue-cli /webpack 全局安裝

如果在意安裝速度，可以使用淘寶鏡像來安裝

安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完淘寶鏡像后，就可以使用cnpm 來代替 npm 安裝工具啦

我個人比較喜歡直接使用npm 安裝：

全局webpack：

npm install webpack -g

vue腳手架vue-cli：

npm install vue-cli -g

安裝webpack 版vue 項目

在指定的目錄中打開命令窗口（編輯器中自帶的命令窗口也可以）

vue init webpack myvuedemo

Install vue-router?Y 安裝

Use ESLint to lint your code? Y (推薦使用，保持良好的代碼編寫規范)

pick an eslint preset. 默認 Standard

set up unit tests ？ n (unit 測試，不需要)

setup e2e tests with Nightwatch？n (e2e 測試，不需要）

Should we run npm install for you after the project has been created? (recom
mended) npm （選用 npm ）

安裝完畢

目錄結構

Vue運行

運行命令

cd myvuedemo
npm run dev

運行成功

頁面內容

Vue build 打包

打包命令

npm run build

打包后的目錄結構

運行打包項目

需要開啟服務運行

使用http-server 運行（如沒有安裝http-server的，使用node 全局安裝 http-server 即可，npm install http-server -g）

cd dist
http-server

運行打包后的內容

從搭建到運行打包發布全部完成，是不是很簡單呢？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com