Vue腳手架搭建過程


 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

項目構建完成,輸入npm run dev運行項目


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM