vue-cli 版本 4.5.4 脚手架搭建项目

布满荆棘的人生 2022-11-29 03:13 122阅读 0赞

# 前言 #

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

Vue Cli官网地址

> https://cli.vuejs.org/

--------------------

# 一、安装Vue Cli #

##### 1.关于旧版本 #####

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

查看当前vue cli版本:

C:\Users\admin>vue --version
    @vue/cli 4.4.6

##### 2.Node 版本要求 #####

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

查看当前node版本:

C:\Users\admin>node -v
    v12.16.2

##### 3.安装最新包 #####

npm install -g @vue/cli

如果你这边已经安装过，则将更新到最新的版本

前面我这边已经安装过4.4.6，则再次执行安装，则将更新到最新版本 4.5.4

C:\Users\admin>vue -V
    @vue/cli 4.5.4

# 二、创建项目 #

vue-cli3.0 以后项目创建命令

vue create vuedemo

下一步，选择配置方式

Vue CLI v4.5.4
    ? Please pick a preset: (Use arrow keys)
    > Default ([Vue 2] babel, eslint)
      Default (Vue 3 Preview) ([Vue 3] babel, eslint)   （默认安装）
      Manually select features                          （手动配置，我选择这个）

下一步，选择插件安装  
通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选。根据需要选择

Vue CLI v4.5.4
    ? 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)
    >(*) Choose Vue version
     (*) Babel       //转码器，可以将ES6代码转为ES5代码
     ( ) TypeScript  //一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
     ( ) Progressive Web App (PWA) Support  // 渐进式Web应用程序
     ( ) Router   vue-router（vue路由）
     ( ) Vuex   // vuex（vue的状态管理模式）
     ( ) CSS Pre-processors  // CSS 预处理器（如：less、sass）
     (*) Linter / Formatter  // 代码风格检查和格式化（如：ESlint）
     ( ) Unit Testing  // 单元测试（unit tests）
     ( ) E2E Testing  // e2e（end to end） 测试

下一步,选择vue.js版本

? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
    ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
    > 2.x
      3.x (Preview)

选择3.x

? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口），我这边选择Y

下一步,选择linter/formatter配置  
提供一个插件化的javascript代码检测工具，选择ESLint + Prettier

? Pick a linter / formatter config: (Use arrow keys)
    > ESLint with error prevention only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint + Prettier

下一步，代码规则检测

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >(*) 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里，选择

下一步，是否保存当前配置

? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
    ? Save this as a preset for future projects? (y/N)   //根据情况选择，我这边n

下一步，开始构建项目

Vue CLI v4.5.4
    ✨  Creating project in D:\Web\Practice\VueDemo\vuedemo.
    �  Initializing git repository...
    ⚙️  Installing CLI plugins. This might take a while...
    
    
    > yorkie@2.0.0 install D:\Web\Practice\VueDemo\vuedemo\node_modules\yorkie
    > node bin/install.js
    
    setting up Git hooks
    done
    
    
    > core-js@3.6.5 postinstall D:\Web\Practice\VueDemo\vuedemo\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"
    
    
    > ejs@2.7.4 postinstall D:\Web\Practice\VueDemo\vuedemo\node_modules\ejs
    > node ./postinstall.js
    
    added 1241 packages from 919 contributors in 149.009s
    
    50 packages are looking for funding
      run `npm fund` for details
    
    �  Invoking generators...
    �  Installing additional dependencies...
    
    added 80 packages from 86 contributors in 22.521s
    
    55 packages are looking for funding
      run `npm fund` for details
    
    ⚓  Running completion hooks...
    
    �  Generating README.md...
    
    �  Successfully created project vuedemo.
    �  Get started with the following commands:
    
     $ cd vuedemo
     $ npm run serve

# 三、运行打包项目 #

##### 1.启动项目 #####

> npm run serve

##### 2.打包项目 #####

> npm run build