【vue】VueCLI(脚手架)

最新推荐文章于 2024-07-08 03:46:00 发布

akiaug

最新推荐文章于 2024-07-08 03:46:00 发布

阅读量141

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/Guai_Ka/article/details/115621061

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

本文介绍了Vue CLI的安装步骤，包括Node.js和NPM的安装，以及如何使用cnpm。详细阐述了Vue CLI的使用，如创建项目、查看版本，并解析了package.json文件的关键内容，包括项目基本信息、脚本、依赖和自定义配置。

摘要由CSDN通过智能技术生成

Vue脚手架官网:https://cli.vuejs.org/zh/guide/
优质文章推荐:https://www.jianshu.com/p/32beaca25c0d

Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建

一、安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm.

1.安装Node.js——什么是nodejs

下载对应你系统的Node.js版本:https://nodejs.org/en/download/
文章安装版本为: node-v12.18.1-x64.msi
测试: 在命令提示符下输入命令
node -v //会显示当前node的版本

2.安装NPM——什么是NPM

node.js已经集成了npm工具
在命令提示符输入 npm -v 可查看当前npm版本

3.安装cnpm

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

4.安装Vue-cli

目前主流版本是 2.x 和 3.x 版本,安装3.x 以上的版本是因为该版本既可以创建2.x项目与3.x 项目
注意: 以管理员身份打开命令行

安装命令
```
npm install -g @vue/cli
```

输入 vue -V 查看版本
```
vue -V
```

package.json内容讲解


{ 
//1.项目基本信息
  "name": "my-project1",
  "version": "0.1.0",
  "private": true,
  //2.指定的运行脚本的命令
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  //生产环境所依赖的模块版本
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  //本地开发环境使用依赖的模块版本
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
  //自定义配置
    "vue":{
    "devServer":{
    	//设置端口号
      "port":"3000",
      	//自动打开浏览器
      "open":true
    }
  }
}

npm install //安装自定义配置