文章目錄

• • • • • 一、環境準備
        • • 1. 安裝node
          • 2. 配置鏡像
        • 二、安裝Vue CLI
        • • 2.1. 查看當前vuecli版本
          • 2.2. 安裝最新版本
          • 2.3. 安裝指定版本
        • 三、創建web項目
        • • 3.1. 指定創建的項目名稱
          • 3.2. 安裝序列圖
          • 3.3. 安裝序列圖簡述

一、環境準備

聲明：命令均在在cmd窗口執行

1. 安裝node

2. 配置鏡像

# 顯示當前的鏡像網址 npm get registry# 使用淘寶的鏡像網址 npm config set registry https://registry.npm.taobao.org/

二、安裝Vue CLI

2.1. 查看當前vuecli版本

# 查看Vue Cli版本 vue --version

2.2. 安裝最新版本

npm install -g @vue/cli

2.3. 安裝指定版本

npm install -g @vue/cli@4.5.9

三、創建web項目

3.1. 指定創建的項目名稱

# 格式：vue create 項目名稱 vue create web

3.2. 安裝序列圖

3.3. 安裝序列圖簡述

Vue CLI v4.5.9 ┌──────────────────────────────────────────┐ │ │ │ New version available 4.5.9 → 4.5.12 │ │ Run npm i -g @vue/cli to update! │ │ │ └──────────────────────────────────────────┘# 選擇創建方式，第一次建議使用手動 ? Please pick a preset: Manually select features# 選擇一些模板組件 router：頁面路由 vuex：用于全局變量 Linter：代碼校驗 ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, Linter# 選擇vue版本 ? Choose a version of Vue.js that you want to start the project with 3.x (Preview)# 是否使用類模板 ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No# 訪問user頁面，地址欄不一樣，history：xxx/user hash:xxx/#/user ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes# EsLint:用于檢查，代碼規范，雙刃劍 ? Pick a linter / formatter config: Basic# 什么時候校驗代碼，在保存的時候 ? Pick additional lint features: Lint on save# router等配置是放到單獨的文件還是一起放到package.json ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files# 是否將這些配置保存為一個模板，方便下一次使用 ? Save this as a preset for future projects? Yes#保存為模板的名稱 ? Save preset as: wiki# 進入web項目 C:\Users\Administrator.DESKTOP-I5SJ4CK\Desktop>cd web# 啟動web項目 C:\Users\Administrator.DESKTOP-I5SJ4CK\Desktop\web>npm run serve# 訪問web項目 http://localhost:8080/

視頻鏈接：
Vue-cli 3.X 構建工具零基礎快速上手

總結

以上是生活随笔為你收集整理的Vue-cli 3.X 构建工具零基础快速上手的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。