关于Vue CLI
Vue.js（读音：/vjuː/, 类似于：view）是一套构建用户界面的渐进式框架
● Vue.js的官方网址是：https://cn.vuejs.org/index.html
需要注意：在使用传统模式开发的前端工程中，各个页面是相对独立的，
甚至你可以在本地硬盘上找到对应的html文件并双击直接打开它，
【而Vue CLI工程与一个Web应用程序一样，是需要启动服务才可以访问的】，
一定程度上，它的上手难度会更大一些，但是在中大型应用程序的开发中，
它在开发效率、管理和维护成本上有更大的优势
单页面应用的工程中需要一定的配置，对配置文件的位置也有一定的要求，
整体工程结果并不像传统的前端应用工程那么自由，所以，手动创建这种应用的成本较大，
而【Vue CLI则可以自动生成vue.js + webpack的工程模板，
是为现代前端工作流提供了Batteries-included（自含全套工具集）的构建设置，
只需要几分钟的时间甚至更短的时间就可以运行起来。】
由Vue CLI创建的工程，默认即是热部署的，
当你启动了这个工程（非打包后 的工程）的服务后，
在绝大部分情况下，修改源代码后并不需要重新启动服务，即可体验到修改后的内容。
——————————————————————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————————————————————
关于npm
npm的全称是：Node Package Manager，可译为“Node包管理器”。
在早期没有npm时，如果需要在前端工程中使用某些框架（例如jQuery、 Bootstrap等），
需要找到相关的官网或资源站点，要么下载这些框架的文件，要么使用cdn在线引用这些文件，
其过程相对烦琐，
因为这些框架的具体表现可能不只是一个文件，
如果下载，只能下载打包后的文件并自行解压缩，
如果在线引用，则需要自行添加多条源代码进行引用，
同时，
是这些框架也是在不停维护和更新的，即使开发人员在本地已经下载过这些框架文件，
当需要新版本的框架时，又需要重新下载，或者上网搜索最 新的cdn引用地址。
为了解决这个问题，I s a a c Z. S ch l u e t e r使用运行在Node.js之上的
JavaScript语言开发了npm，它允许配置一个仓库，并将大量框架的文件放在了npm仓库中，
并提供了一系列的管理命令，最终，开发人员只需要使用npm的命令，
就可以在线获取到框架文件。通常，框架的文件会自动的存储到工程目录下，
并在工程的配置文件中进行注册，开发人员只需要在主配置中进行导入及一些简单的配置就
可以开始使用这些框架。
● 一定程度上，npm与Maven或Gradle是比较相似的。
——————————————————————————————————————————————————————————————————————————————————————
搭建开发环境：
为了使用npm，首先需要下载Node.js安装包：
– https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
– https://mirrors.nju.edu.cn/nodejs/latest-v16.x/node-v16.14.2-x64.msi
– https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node- v16.14.2-x64.msi
Node.js的安装过程没有特别的注意事项，整个安装过程中都可以不必修 改任何内容，直至其自动安装完成
安装Node.js
1.此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用，
在 *** 作系统的命令提示符下执行以下命令即可：
(1)/1.右键windows图标，点击管理员，出现窗口后，输入【npm -v;】查看版本
/2.或者【windows+R 输入cmd调出dos窗口】输入指令也可以！——————建议用这种！
注意：你必须在新的命令提示符窗口（安装完Node.js后再打开的窗口） 中运行此命令。
2.配置npm源
nmp源（即npm仓库，称之为：registry）默认是境外服务器，
在国内使用时访问速度较慢，通常在初次使用时，应该将npm源更换为国内的服务器地址，
例如使用https://registry.npm.taobao.org作为npm源
(1)设置淘宝的npm源：【npm config set registry https://registry.npm.taobao.org】
(3)当配置成功后，可通过get命令可查看npm源：
查看npm源：【npm config get registry】 按回车若显示出上边那个网址即可成功
3.安装Vue CLI脚手架：
(1)执行命令：【npm install -g @Vue/cli】
注：-g表示全局安装，则当前 *** 作系统中所有用户均可使用，且自动配置Vue环境变量。
(2)出现以下提示就是安装成功：
added 897 packages in 1m
npm notice
npm notice New minor version of npm available! 8.5.0 -> 8.10.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.10.0
npm notice Run npm install -g npm@8.10.0 to update!
npm notice
(3)若安装没有成功，则需要卸载后重新安装npm源：重复以上步骤！！！
(4)继续：查看vue版本号：【vue -V】 即可显示当前的Vue CLI版本号
4.创建第1个Vue CLI工程
(1)创建工程：把项目创建在该文件夹：Vue-Workspace 中：
注：[cd..]的意思：可以退回到想创建上面文件夹的路径位置，
若想在[F:\danei\softone\guobinjava> ]处创建，
输入：【mkdir Vue-Workspace】 此时该文件夹创建成功，
(2)进入该文件夹：【cd Vue-Workspace】
(3)当进入Vue Workspace后，就可以创建工程了
①使用vue create命令即可创建Vue CLI工程，命令格式是：[vue create 工程名称]
例如执行：【vue create vue-project-01】
②输入以上指令后，按下Enter键将准备创建工程，创建过程可能耗时较长，
注意：不可反复按Enter键，否则会视为选择各设置选项的默认项
(4)创建过程中会有一些选项:
最先提示的选项是Please pick a preset，
表示“请选择一个预设项”，推荐选择【Manually select features】，表示 “手动选择”，
通过键盘的上下箭头进行选择，选择到目标项后按下键盘的Enter键到下一步：
(5)接下来的选项是Check the features needed for your project，
表示 “选择你的工程中需要使用的功能”，
推荐在列表中选择【Babel、Router、 Vuex】这3项，
使用键盘的上下箭头移动，使用【空格】选中或取消选中，
选择完成后按下键盘的Enter键到下一步：
(6)接下来的选项是Choose a version of Vue.js that you want to start the project with，
表示“选择你的工程中希望使用的Vue.js的版本”，
推荐选择【2.x】这项，选择到目标项后按下键盘的Enter键到下一步
(7)接下来的选项是Use history mode for router，
表示“是否在路由中选 择历史模式”，
推荐选择“是”，输入Y后按下键盘的Enter键到下一步 （提示信息中，Y是大写的，表示它是默认选项，
不输入Y而直接按下 Enter键是等效的）：
(8)接下来的选项是Where do you prefer placing config for Babel, ESLint, etc.?，
表示“你习惯把一些配置信息存放在哪里？”，
推荐选择 【In package.json】，即存放在package.json文件中，
选择到目标项后按下键盘的Enter键到下一步
(9)最后的选项是Save this as a preset for future projects?，
表示“是否 保存以上配置信息，作为后续将创建的新工程的预设？”，
推荐选择 “否”，输入N后按下键盘的Enter键（提示信息中，N是大写的，表示它是默认选项，
不输入N而直接按下Enter键是等效的
(10)至此，配置过程已经结束，接下来会自动创建工程，耗时取决于网络速度，
通常需要30秒至5分钟左右
(11)出现以下即为成功：
Successfully created project vue-project-01.
系统会提示这两句：
$ cd vue-project-01
$ npm run serve
5.启动服务
(0)从现在开始，你可以使用IDEA或类似的开发工具来打开你的项目(vue-project-01)，
并使用idea中内置的【Terminal :在idea中最下边的窗口栏点开即可】执行下面的命令，
使用方式与命令提示符窗口完全相同，为保证你有足够的权限执行命令，
你应该以管理员的身份运行IDEA(一般在idea中是默认的)，
否则，后续仍可能出现某些命令无法成功执行的问题。
(1)进入工程目录:执行命令：【cd vue-project-01】，
(2)执行【npm run serve】命令即可启动此工程的服务（过程中会编译打包此工程）：
(3)当提示以下信息时，表示工程已成功启动：
DONE Compiled successfully in 7728ms 11:41:39
App running at:
- Local: http://localhost:8080/
- Network: http://172.18.8.11:8080/
(4)在浏览器访问上边系统提示的localhost网址，若页面中出现【Vue绿色图标】即为成功！！！
6.停止服务
(1)如果需要停止服务，在控制台使用Ctrl + C即可
● 提示：当按下Ctrl + C后，会提示"终止批处理 *** 作吗(Y/N)?"，输入Y即可停止服务！！！
其实，当按下Ctrl + C后，服务已经被停止，
在此提示中无论选择Y或N结果都已经不重要了
7.重启服务
(1)在idea控制台重新输入【npm run serve】；系统提示出网址在浏览器访问即可！
8.若启动后该网址端口被占用
(1)第一种：可以百度找到该占用的端口号停止服务！
(2)第二种：可修改指定服务端的端口号
此服务默认占用8080端口，如果端口已经被占用，
将自动修改端口为 8081或继续向后递增端口号
● 如需手动修改端口号，在【工程根目录下】的【package.json】中修改scripts属性下serve的值：
【vue-cli-service serve --port 端口号】
(3)例如上面的【package.json】改为使用9090端口：
则下次启动时会使用新设定的端口号：
DONE Compiled successfully in 7728ms 11:41:39
App running at:
- Local: http://localhost:9090/
- Network: http://172.18.8.11:9090/
提示：即使显式的指定了端口号，如果指定的端口仍被其它服务占用，
仍会自动在指定端口号的值的基础上递增，以使用新的端口号！
例如显式的指定了使 用9090端口，如果9090被占用且9091可用时，会自动改为使用9091端口。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）