VUE腳手架搭建

先裝好 node 裝npm

持久使用淘寶鏡像cnpm?

配置:npm configsetregistry https://registry.npm.taobao.org

驗證:npm configgetregistry

通過cnpm使用:npm install -g cnpm --registry=https://registry.npm.taobao.org

直接使用 cnpm install ***

(如果提示 不是內(nèi)部指令 需要在查找vue.cmd的路徑放在path環(huán)境變量中)

全局安裝 webpack

cnpm install webpack -g

全局安裝vue-cli

cnpm install vue-cli -g

檢測vue版本

vue -V

項目初始化?

vue init webpack +項目名稱

輸入命令后,會詢問我們幾個簡單的選項,我們根據(jù)自己的需要進行填寫就可以了。

Project name :項目名稱 ,如果不需要更改直接回車就可以了。注意:這里不能使用大寫,所以我把名稱改成了vueclitest

Project description:項目描述,默認為A Vue.js project,直接回車,不用編寫。

Author:作者,如果你有配置git的作者,他會讀取。

Install ?vue-router? 是否安裝vue的路由插件,我們這里需要安裝,所以選擇Y

Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。我們這里不需要輸入n,如果你是大型團隊開發(fā),最好是進行配置。

setup unit tests with ?Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha,我們這里不需要,所以輸入n。

Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試,我們這里不需要,所以輸入n。

下載依賴包

cnpm i

跑起來

npm run dev

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

幾個重要的文件

package,json

scripts 里 命令行里執(zhí)行的命令具體做了什么 在這里有一一對應

dependencies 里 生產(chǎn)環(huán)境中依賴的包 (客戶要運行的)

devDependencies 開發(fā)環(huán)境中依賴的包

webpack.base.conf.js

webpack的基本配置文件

entry 入口文件

eoutput 出口文件

babelrc

es6轉(zhuǎn)化為es5的配置

npm run build 打包

生成的dist目錄就是打包后上傳到服務器的文件

main.js 入口文件

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容