Vue CLI 4.x 安装及搭建项目

用户4933178004715
423 阅读4分钟

1. 安装 Vue CLI 4.x

npm install -g @vue/cli
# OR
yarn global add @vue/cli
  • 查看版本：vue -V（大写的 V）
vue -V
# OR
vue --version

D:\vue-app>vue -V
@vue/cli 4.5.12
  • 如需升级全局的 Vue CLI 包，请运行：
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
  • 安装项目依赖 上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：
用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容
  • vue-cli 的卸载
// 卸载3.0之前的版本
npm uninstall -g vue-cli
yarn global remove vue-cli

// 卸载3.0之后的版本（可以统一使用此指令卸载）
npm uninstall -g @vue/cli
yarn global remove @vue/cli
  • 使用 Yarn 全局安装 @vue/cli，无法执行 vue 命令：
    • 解决方案：将 Yarn 全局安装的路径，加入到系统环境变量 path 中，如：D:\RTE\Yarn\global\bin；

2. 创建项目

vue create hello-world  // 创建 hello-world 项目
  • 自定义配置
D:\vue-app>vue create hello-world
Vue CLI v4.5.12
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.12 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? 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  // vue 版本
 (*) Babel  // 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
 ( ) TypeScript  // JavaScript（后缀.js）的超集
 ( ) Progressive Web App (PWA) Support  // 渐进式Web应用程序
 (*) Router  // vue路由
 (*) Vuex  // vue的状态管理模式
 (*) CSS Pre-processors   // css预编译 （如：less、sass）
>(*) Linter / Formatter  // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing  // 单元测试（unit tests）
 ( ) E2E Testing  // e2e（end to end） 测试

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)    // vue 3
  • 选择是否使用 history router
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

  • Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。

  • 建议选n(hash #)。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。选yes的话需要服务器那边再进行设置。

  • 修改 hash 模式：打开 /src/router/index.js

export const router = createRouter({
	history: createWebHistory(),
	// createWebHistory => 不带#号,需后端支持  createWebHashHistory带#号
	routes
});
  • Less
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus
  • 提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier
  • 选择什么时候进行代码规则检测 (两个都选)
? Pick additional lint features:
 (*) Lint on save  //  保存就检测
>(*) Lint and fix on commit  //  fix和commit时候检查
  • 选择如何存放配置
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files   //   独立文件放置
  In package.json   //   放package.json里
  • 是否保存当前配置 (N 不保存配置)
? Save this as a preset for future projects? (y/N)
  • 创建成功
🎉  Successfully created project hello-world.  //  创建成功
👉  Get started with the following commands:

 $ cd hello-world   // 进入目录
 $ yarn serve     // 运行项目
  • 启动成功
 App running at:
  - Local:   http://localhost:8080/     // 访问地址
  - Network: http://192.168.199.127:8080/  // 访问地址

  Note that the development build is not optimized.
  To create a production build, run yarn build.

3. vue create 命令可选项

vue create --help

用法：create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目
选项：
  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

4. 使用图形化界面

  • 通过 vue ui 命令，以图形化界面创建和管理项目：
D:\vue-app>vue ui

avatar
文章
阅读
粉丝