vue 新專案建立方法

2022-01-15 04:23:31 字數 1465 閱讀 4307

安裝成功後,開啟命令列,輸入 node -v 檢查版本,如果出現如下圖,則表示安裝成功。

接下來就是用 npm包管理器 建立專案了。

npm 是隨同 nodejs 一起安裝的包管理工具,命令列輸入 npm -v 來檢查npm版本,如下圖

有些 npm 國外資源會被遮蔽,所以經常導致安裝失敗,所以建議大家安裝國內映象 cnpm。

在命令列中輸入 npm install -g cnpm --registry= 然後執行,出現如下圖所示,表示安裝成功。

以上都是建立 vue 專案的前所需安裝的一些東西。

安裝 vue-cli 腳手架構建工具

在命令列中輸入 npm install -g vue-cli 等待安裝完成。

安裝完成後,選定乙個專案目錄,然後執行 vue init webpack ceshi       ceshi  為專案資料夾名稱

執行過程中會有以下選項

project name 專案名稱

project description 專案說明

author 作者

vue build  vue構建 按回車即可

install vue-router 安裝路由

user eslint to lint your code 是否使用 eslint依賴 規範你的**,為避免低階 bug,產出風格統一的**,之後也可以更改。

pick an eslint preset standard 選擇 eslint 預設標準

set up unit tests 設定單元測試

setup e2e tests with nightwatch 用newtwatch 設定e2e測試

完成後如下圖

然後進入專案檔案 cd ceshi ,安裝依賴包,命令列輸入 npm install,結果如下圖。

紅框 node-modules 資料夾,為安裝的依賴包

命令列輸入 npm run dev 執行應用,完成之後瀏覽器中輸入 localhost:8080 檢視我們的專案。結果圖下圖。

到這裡,就表明你建立的第乙個 vue 專案執行成功了。

vue建立新專案

新建乙個資料夾,在該資料夾路徑下開啟終端 1 vue init webpack test test 是新建的專案名稱,自己定義 2 project name test project description a vue.js project author vue build standalone i...

vue搭建新專案

一 安裝node環境 2 cnpm 映象安裝 輸入 npm install g cnpm registry 即可安裝npm映象,以後再用到npm的地方直接用cnpm來代替就好了。3 檢查node,npm及吹牛拍馬 映象是否安裝成功 如果輸出版本號,說明都安裝成功 二 搭建vue專案環境 1 cd 到...

vue2 0使用 1 建立新專案

vue版本 2.2.2 1.全域性安裝vue命令列工具 npm install g vue cli 2.建立乙個基於webpack模板的新專案 vue init webpack my project 注 跟 npm init 類似,輸入一系列專案描述與配置,可以不用配置eslint和單元測試框架。3...