vue3.0beta.1 創建項目


vue3beta.1 創建項目的方法

安裝node.js

略過。網上資料很多,不搬運了。

安裝 vue-cli

npm install -g @vue/cli

注意以下命令是錯誤的!

npm install -g vue
npm install -g vue-cli

這個和以前的安裝命令是不一樣的,估計是要和以前的vue-cli做區別。
如果安裝了以前的版本,建議先卸載

npm uninstall -g vue-cli

安裝成功后,我們即可使用 vue 命令,測試方法:(查看版本)

$ vue -V
@vue/cli 4.5.4 (目前的版本號,估計還會不斷更新)

創建 vue 項目:

vue create vue-test

以前用 init 創建項目,現在改成create,感覺更正規了。
安裝過程會出現各種選項,按照自己的需求選擇即可。

第一個選項,選擇套餐還是自定義。

Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features (手動選擇功能)

我們選擇 Manually select features

自定義選項

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project:
() Choose Vue version (選擇Vue版本,后面可以選擇2.0或者3.0。不勾選的話就默認2.0)
(
) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support (漸進式Web應用程序(PWA)支持)
( ) Router (安裝路由)
( ) Vuex (安裝狀態管理)
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing (單元測試)
( ) E2E Testing ()

選擇路由和狀態管理,如果需要其他的也可以選擇

Babel 是啥?
javascript在不斷的發展,各種新的標准和提案層出不窮,但是由於瀏覽器的多樣性,導致可能幾年之內都無法廣泛普及,babel可以讓你提前使用這些語言特性,他是一種用途很多的javascript編譯器,他把最新版的javascript編譯成當下可以執行的版本,簡言之,利用babel就可以讓我們在當前的項目中隨意的使用這些新最新的es6,甚至es7的語法。說白了就是把各種javascript千奇百怪的語言統統專為瀏覽器可以認識的語言。

好吧我也不太懂。

選擇vue版本

? Choose a version of Vue.js that you want to start the project with
2.x
3.x (Preview)

是否使用 history 的方式使用路由

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

選擇css的方式

Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

選擇第二個

代碼規范檢查方式

ESLint with error prevention only (僅具有錯誤預防功能的ESLint)
ESLint + Airbnb config (ESLint+Airbnb配置)
ESLint + Standard config (ESLint+標准配置)
ESLint + Prettier (ESLint+更漂亮)

第一個基本不管,可以隨意寫。
第二個不是的是哪個配置。
第三個吧,標准一點就好。
第四個是最嚴格的的,甚至要求換行和空格。(如果和自己過不去的話,建議選這個)

選擇 lint 的其他功能

Pick additional lint features:
(*) Lint on save
( ) Lint and fix on commit (requires Git)

配置存放位置

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
In package.json

是否作為模板,供下次創建項目時使用

Save this as a preset for future projects? (y/N)

如果下次創建項目還是這么選擇的話,可以把這個保存為模板,下次直接使用。

? Save preset as:
給模板起名字

下載項目文件

然后就是瘋狂的安裝過程了。需要聯網下載各種需要的文件,同時在本地創建項目。

運行項目

cd vue-test (進入項目文件夾)
npm run serve (運行項目,測試環境)

這個就是調用node編寫的服務器,運行我們的項目,這個是開發環境,還是非常方便的。如果是第一次使用的話,可能會不太習慣,不過沒關系,習慣就好。

瀏覽項目

成功運行后,會出現下面這個頁面

DONE Compiled successfully in 6946ms 下午3:09:09
App running at:

在瀏覽器里輸入上面的網址就可以查看我們的項目了。

批處理(bat)文件

如果是Windows環境的話,每次都要敲命令行,太麻煩了,我們可以使用批處理bat文件來簡化操作。
建立一個記事本文件,擴展名改成.bat。然后輸入一下命令

npm run serve
pause

其他命令可以自行百度。
當然如果你使用的編輯器帶有運行項目的功能的話,就可以略過上面這一條。

項目結構

vue3.0的文件結構


免責聲明!

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



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