Vue CLI

Vue-cli简介

官方文档：https://cli.vuejs.org/zh/guide/

基于Vue的应用开发提供的一个标准的脚手架工具，为应用搭建基础的框架结构提供插件、开发服务、Preset、构建打包功能，通过简单的命令就可以完成"零配置"的项目环境搭建，类似于后端开发的Maven。

安装步骤

在安装Vue-cli前，需要先确认是否已安装Node.js和npm。可以通过以下两个命令来确认。

# 查看Node.js版本
node -v
# 查看npm版本
npm -v

# 若成功打印版本信息，则表示已安装

安装Node.js

下载地址：https://nodejs.org/en/download/
下载好后傻瓜式安装即可。

安装NPM

NPM全称 Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具Maven的依赖管理功能差不多，我们通过 npm 可以很方便地下载js库，打包js文件。

自动安装NPM

事实上Node.js已经集成了NPM，可以输入npm -v命令来确认版本号。

设置包管理路径

包管理路径：npm从远程下载的js包所存放的路径。

# 查询包管理路径
npm config ls

# 设置包管理路径
npm config set prefix "H:\software\nodejs_package\npm_modules" 
npm config set cache  "H:\software\nodejs_package\npm_cache"

# 之后再使用 npm config ls 命令，如下图所示

安装cnpm

npm默认会用国外的镜像去下载js包，速度较慢，在开发中我们通常使用国内镜像，例如淘宝镜像。
在联网的情况下，输入以下命令进行安装：

# 安装 
npm install -g cnpm --registry=https://registry.npm.taobao.org 
# 查看cnpm的版本 
cnpm -v

配置环境变量

查看npm的全局路径：npm config get prefix

• 配置path环境变量：
  1. 添加新的系统变量：key=NODE_HOME，value=D:\Desktop\Java\Nodejs_package
  2. path中添加：%NODE_HOME%\npm_modules

安装Vue-cli

目前主流版本是 2.x 和 3.x 版本，这里建议安装 3.x 以上的版本，该版本可以同时创建2.x项目与3.x项目。
以管理员身份运行命令行：

# 安装
npm i -g @vue/cli

# 安装完成之后查看版本号
vue -V

快速构建Vue项目

步骤说明

以管理员身份运行cmd，进入到创建好的vueTest文件夹，执行以下命令：

# 基于交互式命令方式，创建项目
# 文件名不支持驼峰命名法（含大写字母），应使用短横线方式 
vue create 项目名

选择需要安装的组件，空格键选择，回车键确认：

选择路由的模式，输入 n (选择 hash 模式) ：

选择项目文件单独存放：

是否保存为模版，根据需求选择：

安装完成：

# 进入项目目录
cd my-project
# 启动项目
npm run serve

点击链接：

关闭命令行窗口即可停止项目。

导入项目到VSCode

1. 在VSCode中右键选择打开文件夹
2. 选择对应项目
3. 打开项目后，即可看到如下项目结构

Vue脚手架自定义配置

package.json介绍

package.json文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，配置项目所需的开发环境。

{
  // 项目基本信息
  "name": "project1",
  "version": "0.1.0",
  "private": true,
    
  // 指定运行脚本命令
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
    
  // 生产环境所依赖模块的版本
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
    
  // 本地环境开发所依赖的版本
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

配置项目

在项目的根目录创建文件vue.config.js，在该文件中进行相关的配置：

module.exports = { 
    devServer:{ 
        port:8888 
        open:true 
    } 
}

• 配置说明：设置打包时服务器相关的信息
  • port：访问端口
  • open:true：打包完成自动打开浏览器