1.使用npm全局安裝vue-cli(前提是你已經安裝了nodejs,否則你連npm都用不了),在cmd中輸入一下命令
npm install --global vue-cli
安裝完成后,創建自己的工作空間,在cmd切換至剛剛創建好的工作空間,如果已經有工作空間,直接切換到工作空間即可。使用命令創建項目
vue init webpack vuetest
Test是項目名稱,這個名字自己隨便取。
命令輸入后,會進入安裝階段,需要用戶輸入一些信息
Project name (vuetest) 項目名稱,可以自己指定,也可直接回車,按照括號中默認名字(注意這里的名字不能有大寫字母,如果有會報錯Sorry, name can no longer contain capital letters),阮一峰老師博客為什么文件名要小寫 ,可以參考一下。
Project description (A Vue.js project) 項目描述,也可直接點擊回車,使用默認名字
Author (........) 作者,自己輸吧
接下來會讓用戶選擇
Runtime + Compiler: recommended for most users 運行加編譯,既然已經說了推薦,就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時,已經有推薦了就選擇第一個了
Install vue-router? (Y/n) 是否安裝vue-router,這是官方的路由,我選了n。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼,ESLint是個代碼風格管理工具,是用來統一代碼風格的,並不會影響整體的運行,這也是為了多人協作,新手就不用了,一般項目中都會使用。ESLint官網
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試,我選擇n
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ,我選擇n
完成
簡單說一下目錄,
bulid 里面是一些操作文件,使用npm run * 時其實執行的就是這里的文件
config 配置文件,執行文件需要的配置信息
src 資源文件,所有的組件以及所用的圖片都是在這個放着的簡單看一下這個文件夾下都放了那些東西
assets 資源文件夾,放圖片之類的資源,components 組件文件夾,寫的所有組件都放在這個文件夾下,現在有一個寫好的組件已經放到里面了,router 路由文件夾,這個決定了也面的跳轉規則,App.vue應用組件,所有自己寫的組件,都是在這個組件之上運行了,main.js webpack入口文件,webpack四大特性entry入口、output輸出,loader加載器,plugins插件,可以再項目中build\webpack.base.conf.js第12行看到這個入口文件是哪個。
切換到項目目錄
cd vuetest
安裝一來模塊
npm install