溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

發(fā)布時間：2020-09-01 12:06:02 來源：腳本之家 閱讀：191 作者：Aimee芊 欄目：web開發(fā)

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

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

  • Project name (回車默認)
  • Project description (A Vue.js project) 回車默認 （也可以輸入自己的描述）
  • Author 回車默認（自己的名字）
  • Vue build 默認選擇 Runtime+Compiler

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

Install vue-router?Y 安裝

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

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

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.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

安裝完畢

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

目錄結(jié)構(gòu)

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

Vue運行

運行命令

cd myvuedemo
npm run dev

運行成功

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

頁面內(nèi)容

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

Vue build 打包

打包命令

npm run build

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

打包后的目錄結(jié)構(gòu)

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

運行打包項目

需要開啟服務(wù)運行

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

cd dist
http-server

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

運行打包后的內(nèi)容

vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手