第一步 準(zhǔn)備工作

1.下載安裝Node.js

驗(yàn)證是否安裝的方法，在命令行輸入node -v

2.安裝Vue

在命令行輸入npm install -g @vue/cli

查看Vue版本號 npm vue --version

如果Vue版本太低，先卸載Vue低版本 npm uninstall vue-cli -g

第二步 創(chuàng)建Vue項(xiàng)目

1. 打開要創(chuàng)建路徑

2-1.vue CLI3版本輸入vue create test創(chuàng)建名為test的項(xiàng)目

　接下來會問你一系列的問題

　　Please pick a preset:(Use arrow keys)//選擇使用什么樣的工具，兩個(gè)選項(xiàng)：

　　　　1.default (babel,eslint)　　//默認(rèn)

　　　　2.Manually select features　　//自定義，按空格選中

　　Where do you prefer placing config for Babel, PostCSS，ESLint,etc.?(Use arrow keys)　　//每一個(gè)配置都生成一個(gè)配置文件還是都生成在package.json中

　　　　1.In dedicated config files　　//在專用的配置文件

　　　　2.In package.json　　//在package.json

　　Save this as a preset for future projects?(y/n)　　//保存剛剛選擇的配置

　　　　1.y

　　　　　　Save preset as:　　//保存配置的名字

　　　　2.n

　　等待安裝……

　　安裝完成后，輸入cdtest進(jìn)入項(xiàng)目文件夾中

　　npm run serve啟動項(xiàng)目

2-2.vue CLI2版本輸入vue init webpack demo //項(xiàng)目是基于webpack的 項(xiàng)目名demo

　接下來會有如下提示

　　Project name（工程名）:回車
　　Project description（工程介紹）：回車
　　Author：輸入作者名
　　Vue build（是否安裝編譯器）:回車
　　Install vue-router（是否安裝Vue路由）：回車
　　Use ESLint to lint your code（是否使用ESLint檢查js代碼）：n
　　Set up unit tests（安裝單元測試工具）：n
　　Setup e2e tests with Nightwatch（是否安裝端到端測試工具）：n
　　Should we runnpm installfor you after the project has been created? (recommended)：回車。

第三步 啟動項(xiàng)目

• 進(jìn)入項(xiàng)目目錄：cd demo
• 安裝項(xiàng)目所需要的依賴：npm install
• 啟動項(xiàng)目：npm run dev

啟動成功，瀏覽器打開：localhost:8080，即可看到vue項(xiàng)目。

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

package.json

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論