用腳手架搭建一個 vue 專案

codehhr發表於2021-02-28
Vue

一、需要安裝 node 環境

下載地址: https://nodejs.org/en/
中文網: http://nodejs.cn/

安裝後為方便國內使用，可以把 npm 換成 taobao 的 cnpm (速度快)

npm install -g cnpm --registry=https://registry.npm.taobao.org

檢查是否安裝成功,檢視版本號

node

二、全域性安裝 vue 腳手架

全域性安裝可能需要管理員許可權( Windows 以管理員身份執行; Linux 加 sudo )

npm install -g @vue/cli
或者用 cnpm
cnpm install -g @vue/cli
簡寫
cnpm i -g @vue/cli

安裝成功後可檢視版本

vue -V  (大寫V)

vueversion

三、建立專案

為方便編輯,我一般都在 vscode 裡操作

1.比如建立一個叫 project 的專案

vue create project

如果安裝了 cnpm 就會詢問是否使用淘寶映象(cnpm)

vuecreateusecnpm

都可以,只是影響網速快慢,我裝了 cnpm,這裡我填 Y

2.選擇配置方式

vuecreatechooseconf

說明:

  • Default (babel,eslint): 預設配置
  • Manually select features: 手動選擇配置

鍵盤上下就可以選擇,選 Manually select features (最下面那個),俺不用預設配置

3.手動選擇專案所需要的包

vuecreateconf

說明:

  • Babel: Babel 編譯,將 ES6 編譯成 ES5,進行相容
  • TypeScript: 給 JavaScript 新增特性的語言擴充套件
  • Progressive Web App (PWA) Support: 讓網頁漸進式變成 App
  • Router: Vue 路由
  • Vuex: Vue 狀態管理
  • CSS Pre-processors: CSS 預編譯器 (包括 SCSS/Sass、Less、Stylus)
  • Linter / Formatter: 程式碼檢測和格式化
  • Unit Testing: 單元測試
  • E2E Testing: 端到端測試
根據需求進行勾選,上下鍵選擇,空格是取消或選中,選完最後回車

如圖:

vuecreateconfafter

4.選擇版本

vuecreatechooseversion

5.路由是否採用 history 模式

選啥都可以,之後可以改

vuecreateusehistoryforrouter

6.選擇 CSS 編譯方法

vuecreatepickcssway

按需選擇,我選的 Less

7.選擇程式碼規範

vuecreatepickeslintway

我選的 Standard config

說明:

  • eslint with ... : 只進行報錯提醒;
  • eslint + A ... : 不嚴謹模式;
  • eslint + S ... : 正常模式;
  • eslint + P ... : 嚴格模式;

8.選擇合適程式碼檢驗規範

vuecreatelintonsave

選 lint on save,也就是報存時檢驗

9.選擇放置配置的檔案

vuecreateconfplace

我選的第一個,放到一個獨立檔案裡

10.是否儲存配置為以後使用

vuecreatesaveconf

先不儲存 (N)

11.安裝完成

vuecreatedone

執行專案

其實安裝完成後有提示

cd project (進入專案根目錄)
npm run serve

vuenpmrunserve

會在本地 8000 埠執行

如圖

vuerunning

The_End

相關文章