vue-cli

一、环境安装： （一）安装node.js和npm: windows环境下，直接在node.js官网下载node.js安装程序，直接安装，安装完成后，node.js和npm都会安装上了。 （二）安装vue3.0以上版本： 在cmd命令行执行npm install -g @vue/cli。执行全局安装vue-cli包。 二、创建vue-cli项目： （一）vue create hello-world 建议都使用cli初始化一个项目而非图形化界面，在创建的过程中，有一系列的初始化设置preset。 （二）手动创建： 选择：Manually select features （三）插件选择： >(*) Babel ES6 向下兼容 ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router 路由 (*) Vuex ( ) CSS Pre-processors (*) Linter / Formatter 保存时检查？ ( ) Unit Testing ( ) E2E Testing （四）linter 检查： Pick a linter / formatter config: ESLint with error prevention only 仅错误预防 > ESLint + Airbnb config Airbnb 配置

目录 一、安装vue-cli 2.x 1.安装2.x最新版本 2.指定2.x版本 二、安装vue-cli 4.x 1.安装4.x最新版本 2.安装3.x指定版本 三、卸载vue-cli 一、安装vue-cli 2.x 1.安装2.x最新版本 npm install -g vue-cli #OR yarn global add vue-cli 2.指定2.x版本 npm install -g vue-cli@2.x.x #OR yarn global add vue-cli@2.x.x 二、安装vue-cli 4.x 1.安装4.x最新版本 npm install -g @vue/cli #OR yarn global add @vue/cli 2.安装3.x指定版本 npm install -g @vue/cli@3.x.x #OR yarn global add @vue/cli@3.x.x 三、卸载vue-cli npm uninstall -g vue-cli #OR yarn global remove vue-cli Vue-CLI Link： Vue CLI 🛠️ Vue.js 开发的标准工具 来源： CSDN 作者： Road to be king 链接： https://blog.csdn.net/u011046452/article/details

一、利用vue-cli3快速搭建vue项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI ： @vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务 ： @vue/cli-service 是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如： serve 、 build 和 inspect 命令） CLI 插件 ：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等） 1、全局安装过旧版本的 vue-cli (1.x 或 2.x)要先卸载它，否则跳过此步： npm uninstall vue-cli -g 2、安装vue-cli 3.0 Vue cli 3的包名称由 vue-cli 改成了 @vue/cli npm install @vue/cli -g 3. vue-cli搭建脚本文件 以搭建一个项目名称为 vue-test 的Vue前端项目为例: vue create vue-test 默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包 根据提示进行相应的配置

前言 在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。 输出产物 构建一个库与构建一个一般应用最大的不同点在于 构建完成后输出的产物 。 一般应用构建完成后会输出： 一个 html 文件 一个 js 入口 chunk 、若干子 chunk 若干 css 文件 若干其它资源，如图片、字体文件等 虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。 一个库构建完成后会输出： 一个 CommonJS 格式的 js 文件 一个未压缩的 UMD 格式的 js 文件 一个已压缩的 UMD 格式的 js 文件 可能包括若干的 css 文件 可能包括若干的其它资源文件 库的入口分别是上面罗列的 js 文件；你可能会奇怪，一个库怎么会有3个入口文件呢？莫急，且听我一一道来。 CommonJS CommonJS 是 Node.js 推行的一种模块化规范，主要语法包括 module.exports 、 require() 等；而我们在使用 webpack 引入 npm 包时，实际上是处于 Node.js 环境，由此可知，这个 CommonJS 格式的入口 js 文件

前提 ：必须安装node.js，官方地址：https://nodejs.org/en/ 然后安装vue-cli　安装方式 ：cmd命令行安装：打开cmd命令符输入进行全局安装脚手架： npm install -g @vue/cli 全局脚手架安装成功之后就可以创建vue项目了 开始创建项目：这里Vue项目有几种创建方式 一：cmd命令行创建 在全局安装vue-cli之后就可以创建vue项目:三种创建方式： 这里演示第三种 第一种 （旧版本创建项目， 不推荐 ）：首先要安装依赖包 npm install -g @vue/cli-init 然后命令行输入： vue init webpack my-project 开始创建项目 第二种 （新版本 可视化 创建项目， 推荐 ） ：通过命令行输入： vue ui 进行可视化创建 第三种 （新版本 命令行 创建项目） ： 通过命令行输入： vue create my-project 开始创建vue项目 步骤一：选择安装方式：第一种自动安装；第二种手动安装建议手动安装选择自己需要的包。 步骤二：选择需要的包进行安装，空格选择，回车确定。这里选择常用的三个包 步骤三： 提示是否选择历史模式的路由，这里选N，哈希模式 步骤四：选择ESLint版本,这里用常规模式： Standard config 步骤五：语法检查方式，选择第一个：保存就检查 步骤六

一、Node.js 1.介绍 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它不是一门语言，其实就是一个运行javascript的运行环境（平台），可以理解为一个运行js的虚拟机，以前只有浏览器才可以解析Javascript代码，有了Nodejs之后可以脱离浏览器运行，简单的说就是Node.js是运行在服务端的JavaScript，举例说明： 我们新建JavaScript文件，里边输入内容 console.log("Hello World") 安装完成环境之后打开终端，键入Node进入命令交互模式，输入 node HelloWorld.js，可以看到之前在浏览器控制台可以看到的内容 2.下载安装 https://nodejs.org/en/download/ 点击下载安装，vue-cli要求Node的版本8及更高 二、npm npm（Node package Manager）在刚刚上一步中，npm是随NodeJS一起安装的包管理工具，能解决Node.js代码部署上的很多问题，它已经成了Node.js的标准发布平台，用于Node.js包的发布、传播、依赖控制。npm提供了命令行工具，使你可以方便的下载、安装