Vue脚手架详解

Vue脚手架快速入门

本文档参照Vue CLI文档编写，整理不易_博主叹息！

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统依赖于NodeJS，提供：

• 快速项目创建
• 零配置原型开发
• 一个运行时依赖（基于webpack）
• 一个丰富的官方插件集合
  • 3.x ++ 版本提供了一套完全图形化的创建和管理 Vue.js 项目的用户界面

Vue CLI相关组件

npm基础操作补充先查看NodeJS Npm包管理器基础使用

提示：Vue CLI是基于NodeJS的一个组件，需要使用NodeJS下的Npm包管理工具

组件名	作用	用途
@vue/cli	实现的交互式的项目脚手架	快速创建Vue项目
@vue/cli-init	拉取 2.x 模板 (旧版本)	使用旧版本的vue init功能创建项目
@vue/cli-service-global	实现对单个 *.vue 原型开发	vue serve 和 vue build 命令
@vue/cli-service	CLI 服务（基于webpack-dev-server）	提供项目运行项目服务和热重载
@vue/cli-plugin- *	CLI 内建插件	基于插件
vue-cli-plugin- *	CLI 社区插件	基于插件

---

Vue脚手架版本比较

	vue-cli（旧版本）	@vue/cli（新版本-推荐）
安装环境	Node.js (>=6.x, 8.x preferred)	npm version 3+ and Git Node.js 8.9 或更高版本 (推荐 8.11.0+)
安装	npm install vue-cli -g	npm install -g @vue/cli 或者 yarn global add @vue/cli
查看版本号	vue -V	vue -V
卸载	npm uninstall vue-cli -g 或 yarn global remove vue-cli npm uninstall	npm install @vue/cli -g 或者 yarn global remove @vue/cli
创建vue项目	vue init 两种常用的模板类型： vue init webpack-simple webpack 如：vue init webpack my-project	vue ui 通过图形化页面创建 vue create 通过命令行创建
启动vue项目	npm run dev 或 npm start	npm run serve
打包vue项目	npm run build	npm run build

Vue CLI

Vue CLI 安装

Vue脚手架更新日志（2020-10-07）更新到了4.5.7版本

Vue脚手架更新差距较大的版本为2.x版本和3/4.x版本

1）指定版本安装

## 3.0以下?
npm install -g vue-cli@#<版本号>
## 3.0以上?
npm install -g @vue/cli@#<版本号>

## （#<版本号>）为指定的版本

2）2.x版本安装

## 安装WebPack打包工具
npm install -g webpack
## 安装WebPack Server插件
npm install -g webpack-dev-server
## 安装 Vue CLI 2.9.6 版本
npm install -g vue-cli

3）新版本安装

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先卸载它

## 卸载旧版本
npm uninstall vue-cli -g
## 安装Vue CLI 新版本
npm install -g @vue/cli

4）新版本桥接 2.x 模板(旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

## 安装桥接工具
npm install -g @vue/cli-init

使用 Vue CLI 创建项目

Vue脚手架 Vue CLI < 3 和 Vue CLI >= 3 创建项目方法有所差距
如果要在新版脚手架使用旧版命令创建则需要桥接工具@vue/cli-init拉取 2.x 模板

Sorry, name can no longer contain capital letters.
创建的项目名称不能再包含大写字母
据说是一个梗:阮一峰-为什么文件名要小写？最主要是考虑到可移植性

1）Vue CLI >= 3

下述#<项目名>为需要创建的项目名称

1. 创建一个项目

vue create #<项目名>

Vue CLI v4.5.7
? Please pick a preset: # 选择预设方案
❯ Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯ Manually select features ## 手动选择功能
? Check the features needed for your project: # 项目所需的功能
❯◉ Choose Vue version # 选择查看版本
❯◉ Babel # JavaScript的编译器/格式转换工具
❯◉ TypeScript # TS语法支持
❯◉ Progressive Web App (PWA) Support # 渐进式Web应用程序（PWA）支持
❯◉ Router # Vue 路由
❯◉ Vuex	# Vue 状态管理
❯◉ CSS Pre-processors # Style 预编译器
❯◉ Linter / Formatter # 代码规范检查/格式化工具
❯◉ Unit Testing # Unit单元检测工具
❯◉ E2E Testing # 端到端的单元检测工具
? Choose a version of Vue.js that you want to start the project with # 选择您要用来启动项目的Vue.js版本
❯ 2.x 
❯ 3.x (Preview)
? Use class-style component syntax? # 使用类样式的组件语法
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? # 将Babel与TypeScript一起使用
? Use history mode for router? (Requires proper server setup for index fallback in production) # 对路由器使用历史记录模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): # 选择一个CSS预处理器
❯ Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
❯ Less 
❯ Stylus 
? Pick a linter / formatter config: 选择一个linter / formatter配置
❯ ESLint with error prevention only 
❯ ESLint + Airbnb config 
❯ ESLint + Standard config 
❯ ESLint + Prettier 
❯ TSLint (deprecated) 
? Pick additional lint features: # linter / formatter 在什么时候检测规范
❯◉ Lint on save
❯◉ Lint and fix on commit
? Pick a unit testing solution: # 选择一个单元测试解决方案
❯ Mocha + Chai 
❯ Jest 
? Pick an E2E testing solution: # 选择一个端到端的测试解决方案
❯ Cypress (Chrome only) 
❯ Nightwatch (WebDriver-based) 
❯ WebdriverIO (WebDriver/DevTools based) 
? Pick browsers to run end-to-end test on # 选择浏览器以运行端到端测试
❯◉ Chrome
❯◉ Firefox
? Where do you prefer placing config for Babel, ESLint, etc.? # 您希望在哪里放置配置文件
❯ In dedicated config files 
❯ In package.json 
? Save this as a preset for future projects? # 将此保存为预设以供将来的项目使用

Vue CLI v4.5.7
✨  Creating project in /home/smallyo/project/VUE/app.
⚙️  Installing CLI plugins. This might take a while...

  run `npm audit fix` to fix them, or `npm audit` for details
🚀  Invoking generators...
📦  Installing additional dependencies...
## 因为脚手架运行了`npm install`所以时间比较长等待一会就创建好了
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd apps
 $ npm run serve

目录结构如下:

├── babel.config.js
├── jest.config.js
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── 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
│   ├── index.html
│   └── robots.txt
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── registerServiceWorker.ts
│   ├── router
│   │   └── index.ts
│   ├── shims-tsx.d.ts
│   ├── shims-vue.d.ts
│   ├── store
│   │   └── index.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tests
│   ├── e2e
│   │   ├── custom-assertions
│   │   │   └── elementCount.js
│   │   ├── custom-commands
│   │   │   ├── customExecute.js
│   │   │   ├── openHomepageClass.js
│   │   │   └── openHomepage.js
│   │   ├── globals.js
│   │   ├── page-objects
│   │   │   └── homepage.js
│   │   └── specs
│   │       ├── test.js
│   │       └── test-with-pageobjects.js
│   └── unit
│       └── example.spec.ts
└── tsconfig.json

2. 可视化 创建/管理 项目

vue ui
######此时会打开浏览器，可视化操作######

2）Vue CLI < 3

Vue.js官方提供了两种类型的模板项目：

• 基于vue cli和browserify的项目模板
• 基于vue cli和webpack的项目模板

下述#<项目名>为需要创建的项目名称

1. 简单模式创建一个项目

vue init webpack-simple #<项目名>

? Project name #项目名称
? Project description #项目简介
? Author #作者
? License #许可类型
? Use sass? #是否使用sass
   vue-cli · Generated "<项目名>".##此时创建成果
   To get started: ##输入下边命令进入项目
   
     cd my-project
     npm install
     npm run dev

目录结构如下:

├── index.html
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

2. 完全模式创建一个项目

vue init webpack #<项目名>

? Project name #项目名称
? Project description #项目简介
? Author #作者
? Vue build #Vue构建模式
❯ Runtime + Compiler: recommended for most users 
❯ Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 
? Install vue-router? #安装Vue路由
? Use ESLint to lint your code? #使用ESLint整理代码
? Pick an ESLint preset #选择一个ESLint预设
❯ Standard (https://github.com/standard/standard) 
❯ Airbnb (https://github.com/airbnb/javascript) 
❯ none (configure it yourself) 
? Set up unit tests #设置单元测试
? Pick a test runner (Use arrow keys) #选择一个测试工具
❯ Jest 
❯ Karma and Mocha 
❯ none (configure it yourself) 
? Setup e2e tests with Nightwatch? #使用Nightwatch设置e2e测试
? Should we run `npm install` for you after the project has been created? #创建项目后，我们应该为您运行`npm install`
❯ Yes, use NPM 
❯ Yes, use Yarn 
❯ No, I will handle that myself 
  
   vue-cli · Generated "<项目名>".##此时创建成果
   # Project initialization finished!
   # ========================
   To get started: ##输入下边命令进入项目

  cd my-project
  npm install (or if using yarn: yarn)
  npm run dev
# Documentation can be found at https://vuejs-templates.github.io/webpack

目录结构如下:

├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── router
│       └── index.js
├── static
└── test
    ├── e2e
    │   ├── custom-assertions
    │   │   └── elementCount.js
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    │       └── test.js
    └── unit
        └── specs
            └── HelloWorld.spec.js

运行项目

参照项目生成的README.md文件说明操作

2）Vue CLI >= 3

npm run serve

2）Vue CLI < 3

npm start
# 或者
npm run dev

NodeJS Npm包管理器基础使用

NodeJS Npm包管理器基础使用

npm init # 然后根据提示填写项目信息即可初始化项目

npm install(i) [package]@[version] (-S/-D) (-g) # 安装依赖
参数解析:
1.install(i)  install有一个简写i
2.[package]@[version] package为npm包名，后面的@[version]可选，没有的时候默认安装最新版本
3.-S/-D,-S是--save的简写，-D是--save-dev的简写，-S与-D的区别就是-S会被打包到运行环境中去，-D只是在开发中使用，比如babel转码
4.-g是-global的简写，这个选项会被npm包安装到全局去，一般用于一些在命令行使用的npm包，比如vue-cli，使用-g时没有-S/-D选项

npm uninstall (-g) [package] # 删除依赖

npm update (-g) [package]@[version] #更新包

npm outdated [package] # 查看过期包

npm list
npm ll
npm la
npm ls [package] # 查看包版本

npm run [scriptname] #运行脚本

回到 Vue CLI 相关组件

---

Npm 参数：

install                     uninstall                   update                      outdated
init                        ls                          run
-?                          -ham-it-up                  -no-legacy-bundling         -proxy                    
-access                     -heading                    -no-link                    -q                        
-allow-same-version         -help                       -no-long                    -quiet                    
-also                       -https-proxy                -no-offline                 -read-only                
-always-auth                -if-present                 -no-optional                -readonly                 
-audit                      -ignore-prepublish          -no-package-lock            -rebuild-bundle           
-audit-level                -ignore-scripts             -no-package-lock-only       -reg                      
-auth-type                  -init-author-email          -no-parseable               -registry                 
-B                          -init-author-name           -no-prefer-offline          -rollback                 
-before                     -init-author-url            -no-prefer-online           -s                        
-bin-links                  -init-license               -no-production              -S                        
-browser                    -init-module                -no-progress                -save                     
-C                          -init-version               -noproxy                    -save-bundle              
-ca                         -json                       -no-read-only               -save-dev                 
-cache                      -key                        -no-rebuild-bundle          -save-exact               
-cache-lock-retries         -l                          -no-reg                     -save-optional            
-cache-lock-stale           -legacy-bundling            -noreg                      -save-prefix              
-cache-lock-wait            -link                       -no-rollback                -save-prod                
-cache-max                  -local                      -no-save                    -scope                    
-cache-min                  -local-address              -no-save-bundle             -script-shell             
-cafile                     -loglevel                   -no-save-dev                -scripts-prepend-node-path
-cert                       -logs-max                   -no-save-exact              -searchexclude            
-cidr                       -logstream                  -no-save-optional           -searchlimit              
-color                      -long                       -no-save-prod               -searchopts               
-commit-hooks               -m                          -no-send-metrics            -searchstaleness          
-d                          -maxsockets                 -no-shrinkwrap              -send-metrics             
-D                          -message                    -no-sign-git-commit         -shell                    
-dd                         -metrics-registry           -no-sign-git-tag            -shrinkwrap               
-ddd                        -n                          -no-strict-ssl              -sign-git-commit          
-depth                      -N                          -no-timing                  -sign-git-tag             
-desc                       -no-allow-same-version      -no-unicode                 -silent                   
-description                -no-always-auth             -no-unsafe-perm             -sso-poll-frequency       
-dev                        -no-audit                   -no-update-notifier         -sso-type                 
-dry-run                    -no-before                  -no-usage                   -strict-ssl               
-E                          -no-bin-links               -no-version                 -tag                      
-editor                     -no-commit-hooks            -no-versions                -tag-version-prefix       
-engine-strict              -node-options               -O                          -timing                   
-f                          -no-desc                    -offline                    -tmp                      
-fetch-retries              -no-description             -onload-script              -umask                    
-fetch-retry-factor         -no-dev                     -only                       -unicode                  
-fetch-retry-maxtimeout     -node-version               -optional                   -unsafe-perm              
-fetch-retry-mintimeout     -no-dry-run                 -otp                        -update-notifier          
-force                      -no-engine-strict           -p                          -usage                    
-format-package-lock        -no-force                   -P                          -user                     
-fund                       -no-format-package-lock     -package-lock               -user-agent               
-g                          -no-fund                    -package-lock-only          -userconfig               
-git                        -no-git-tag-version         -parseable                  -v                        
-git-tag-version            -no-global                  -porcelain                  -verbose                  
-global                     -no-global-style            -prefer-offline             -version                  
-globalconfig               -no-ham-it-up               -prefer-online              -versions                 
-global-style               -no-if-present              -prefix                     -viewer                   
-group                      -no-ignore-prepublish       -preid                      -y                        
-h                          -no-ignore-scripts          -production                                           
-H                          -no-json                    -progress                                

友情链接

Vue中文社区 ¹
Vue2.x官方文档²
Vue3.x官方文档³
Vue CLI文档⁴
NodeJS 官方API文档⁵
Npm 官方文档⁶