從腳手架開始學前端 【第5期】Vue腳手架搭建

時間  2020-03-09
標籤 腳手架 開始 前端 第5期 vue 搭建 简体版
原文   原文鏈接

前言

Vue.js（讀音 /vjuː/, 相似於 view） 是一套構建用戶界面的漸進式框架。html

特色

Vue 只關注視圖層， 採用自底向上增量開發的設計。前端

Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。vue

安裝

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，經過 @vue/cli 搭建交互式的項目腳手架。 經過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。 一個運行時依賴 (@vue/cli-service)，該依賴： 可升級； 基於 webpack 構建，並帶有合理的默認配置； 能夠經過項目內的配置文件進行配置； 能夠經過插件進行擴展。 一個豐富的官方插件集合，集成了前端生態中最好的工具。 一套徹底圖形化的建立和管理 Vue.js 項目的用戶界面。 Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。與此同時，它也爲每一個工具提供了調整配置的靈活性。node

vue-cli3腳手架安裝

npm install -g @vue/cli
# OR
yarn global add @vue/cli
# TEST
vue -V
複製代碼

建立項目

vue create my-project
# OR
vue ui
複製代碼

命令講解

根據提示，咱們選擇搭建項目須要集成的工具，對於新手，通常建議使用默認,若是須要其餘集成，用方向鍵移動到手動選擇功能，而後點擊回車鍵android

Vue CLI v4.2.3
? Please pick a preset: (Use arrow keys) //請選擇一個預設：（使用箭頭鍵）
> default (babel, eslint)                //默認（babel，eslint）
  Manually select features               //手動選擇功能
複製代碼

若是建立過，會提示下面信息webpack

Vue CLI v4.2.3
? Target directory my-template already exists. Pick an action: (Use arrow keys) //目標目錄my-template已存在
選擇一個動做：（使用箭頭鍵）
> Overwrite      //覆寫上次配置
  Merge          //合併
  Cancel         //取消                                                                                             
複製代碼

選擇Overwrite覆蓋上次配置git

Vue CLI v4.2.3
? Target directory D:\my-project already exists. Pick an action: Overwrite
Removing D:\my-project...
複製代碼

根據本身的習慣，用箭頭鍵選擇對應的包管理器，小編用的是Yarn，選中直接點擊回車程序員

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)                                   //當前選中的選項記錄
? Pick the package manager to use when installing dependencies: (Use arrow keys)  //選擇安裝依賴項時要使用的程序包管理器：（使用箭頭鍵）
> Use Yarn
  Use NPM     
複製代碼

使用Yarn拉取項目web

Vue CLI v4.2.3
✨  Creating project in D:\xunzhaotech\my-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 88.14s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 17.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ yarn serve
複製代碼

若是用的是NPM包管理器，選中直接點擊回車chrome

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)                                   //當前選中的選項記錄
? Pick the package manager to use when installing dependencies: (Use arrow keys)  //選擇安裝依賴項時要使用的程序包管理器：（使用箭頭鍵）
   Use Yarn
>  Use NPM     
複製代碼

使用NPM拉取項目

Vue CLI v4.2.3
✨  Creating project in D:\xunzhaotech\my-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 88.14s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 17.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve
複製代碼

上述咱們使用的默認選項，下面咱們進入手動選擇選項，點擊回車

Vue CLI v4.2.3
? Please pick a preset:       //請選擇一個預設
  default (babel, eslint)     //默認（babel，eslint）
> Manually select features    //手動選擇功能
複製代碼

根據咱們項目的須要，結合方向鍵和空格鍵選擇咱們須要的配置，而後點擊回車

Vue CLI v4.2.3
? Please pick a preset: Manually select features //請選擇一個預設：手動選擇功能
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)//選取項目所需的功能：（按<空格>選擇，<a>切換所有，<i>反轉選擇）
>(*) Babel                                   //集成Babel
 (*) TypeScript                              //集成TypeScript 
 (*) Progressive Web App (PWA) Support       //集成漸進式Web應用程序（PWA）支持   
 (*) Router                                  //集成Router
 (*) Vuex                                    //集成Vuex
 (*) CSS Pre-processors                      //集成預處理(Less/SCSS/Sass/Stylus)
 (*) Linter / Formatter                      //集成代碼校驗和格式化
 (*) Unit Testing                            //集成單元測試（站在程序員的角度測試）
 (*) E2E Testing                             //集成單元測試（站在用戶角度的測試 )                                                                                                    
複製代碼

根據咱們的須要，選擇(Y/n)，若是所有使用，直接回車，在選擇CSS預處理(CSS Pre-processors) 的時候，根據本身的習慣選擇

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes //使用類樣式的組件語法
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes //將Babel與TypeScript一塊兒使用（用現代模式，自動檢測的polyfill，轉譯JSX）
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes //使用路由器的歷史記錄模式？
（須要適當的服務器設置才能在生產中進行索引回退）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)//選擇一個CSS預處理器（默認狀況下支持PostCSS，Autoprefixer和CSS模塊）
> Sass/SCSS (with dart-sass) //dart-sass保存後生效
  Sass/SCSS (with node-sass) //node-sass自動編譯實時
  Less
  Stylus                                                                                                                                                                                                                                                             
複製代碼

選擇須要校驗和格式化的方式(Linter / Formatter),選擇ESLint + Standard config點擊回車

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys) //選擇一個lint / formatter配置
  ESLint with error prevention only //僅具備錯誤預防功能的ESLint
  ESLint + Airbnb config            //ESLint + Airbnb 配置
> ESLint + Standard config          //ESLint +標準配置
  ESLint + Prettier                 //ESLint +代碼美化
  TSLint (deprecated)               //TSLint（已棄用）                                                                                         
複製代碼

根據須要選擇保存時候校驗，或者提交時修復校驗,而後點擊回車

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) //選擇其餘校驗功能
>(*) Lint on save           //保存時校驗（保存時校驗）
 ( ) Lint and fix on commit //校驗並修復提交 （提交時校驗）              
複製代碼

Jest是由facebook發佈的，最近比較火熱的一個測試框架。Jest的優點是:

  1. Jest容易安裝配置:Jest能夠說是零配置的，它會自動識別一些測試文件。只要用npm安裝jest以後運行jest，便可完成測試，很是容易。
  2. Jest提供snapshot功能: snapshot功能可以確保UI不會意外被改變。Jest會把結果值保存在一個文件當中，每次進行測試的時候會把測試值與文件中的結果值進行比較，若是兩個結果值不一樣，那麼開發者能夠選擇要麼改變代碼，要麼替代結果文件。 3.其餘:除了上面所提到的優點，Jest還擁有着很是廣闊的API並且更加適合測試React應用。

Mocha是JavaScript界中最受歡迎的一款單元測試框架。

1.靈活性: Mocha比較靈活，和更多的一些庫結合使用。 2.資料較多:Mocha是比較年老的測試框架，在JavaScript界中更加普遍地使用。所以Mocha的community比較大,本文咱們選擇Mocha + Chai,而後點擊回車

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: (Use arrow keys) //選擇一個單元測試解決方案
> Mocha + Chai    //Mocha是JavaScript界中最受歡迎的一款單元測試框架
  Jest            //Jest是由facebook發佈的，最近比較火熱的一個測試框架                                                                                                                                                                                                                                                                 
複製代碼

現代比較流行的 e2e 測試框架有Nightwatch、TestCafe、Protractor、WebdriverIO、Cypress，咱們選擇 Nightwatch

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: (Use arrow keys)//選擇一個E2E測試解決方案：（使用箭頭鍵）
> Cypress (Chrome only) //Cypress（僅Chrome）
  Nightwatch (WebDriver-based) //Nightwatch（基於WebDriver）     
複製代碼
Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)//選擇瀏覽器以運行端到端測試
>(*) Chrome
 ( ) Firefox                                                                                                                                                                                                                                                                                          
複製代碼

此處咱們選擇在專用配置文件中，點擊回車

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)//您更喜歡在哪裏放置Babel，ESLint等的配置。
> In dedicated config files //在專用配置文件中
  In package.json           //在package.json中
複製代碼

這裏咱們選擇Y,在下次建立項目的時候使用，點擊回車

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) //將此保存爲預設以供未來的項目使用嗎？                                                                                                                                                                                                                                                                                                                                                                    
複製代碼

進入項目並安裝依賴

PS cd .\my-project\  
# AND
yarn install
複製代碼

項目目錄

my-project
│  .browserslistrc
│  .editorconfig
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package.json
│  README.md
│  tsconfig.json
│  yarn.lock
│
├─public
│  │  favicon.ico
│  │  index.html
│  │  robots.txt
│  │
│  └─img
│      └─icons
│              android-chrome-192x192.png
│              android-chrome-512x512.png
│              android-chrome-maskable-192x192.png
│              android-chrome-maskable-512x512.png
│              apple-touch-icon-120x120.png
│              apple-touch-icon-152x152.png
│              apple-touch-icon-180x180.png
│              apple-touch-icon-60x60.png
│              apple-touch-icon-76x76.png
│              apple-touch-icon.png
│              favicon-16x16.png
│              favicon-32x32.png
│              msapplication-icon-144x144.png
│              mstile-150x150.png
│              safari-pinned-tab.svg
│
├─src
│  │  App.vue
│  │  main.ts
│  │  registerServiceWorker.ts
│  │  shims-tsx.d.ts
│  │  shims-vue.d.ts
│  │
│  ├─assets
│  │      logo.png
│  │
│  ├─components
│  │      HelloWorld.vue
│  │
│  ├─router
│  │      index.ts
│  │
│  ├─store
│  │      index.ts
│  │
│  └─views
│          About.vue
│          Home.vue
│
└─tests
    ├─e2e
    │  │  .eslintrc.js
    │  │  globals.js
    │  │
    │  ├─custom-assertions
    │  │      elementCount.js
    │  │
    │  ├─custom-commands
    │  │      customExecute.js
    │  │      openHomepage.js
    │  │      openHomepageClass.js
    │  │
    │  ├─page-objects
    │  │      homepage.js
    │  │
    │  └─specs
    │          test-with-pageobjects.js
    │          test.js
    │
    └─unit
            example.spec.ts
複製代碼

啓動項目

yarn serve
複製代碼

掃碼關注

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程