Vue腳手架搭建過程

2022-02-23 18:21:24 字數 1419 閱讀 1010

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   資源檔案,所有的元件以及所用的都是在這個放著的簡單看一下這個資料夾下都放了那些東西

切換到專案目錄

cd vuetest

安裝一來模組

npm install

專案構建完成,輸入npm run dev執行專案

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...

Vue腳手架搭建

sudo apt get install nodejs legacy nodejs sudo apt get install npm 安裝成功後檢視對應版本 npm install vuenpm install g cnpm registry vue安裝成功後檢視對應版本 npm install g...

vue腳手架搭建

一 vue cli腳手架的搭建步驟 首先,確定你的電腦上已經安裝了nodejs,可以使用npm包管理器安裝環境 1 開啟cmd命令視窗,切換到你要新建專案的資料夾下,此時可使用node v檢查node的版本,如果出現版本號則node已安裝。2 使用以下命令全域性安裝vue cli npm insta...