网站建设需要干什么,wps可以做网站吗,万能站工具的企业网站系统,制做网站的公司文章目录 什么是Vue CliVue CLI#xff0c;全称为 Vue Command Line Interface#xff0c;是一个基于 Vue.js 进行快速开发的完整系统。它通过提供可选插件来增加项目的规模#xff0c;同时还提供了创建向导式的用户界面#xff0c;帮助我们快速生成一个 Vue.js 项目。Vue … 文章目录 什么是Vue CliVue CLI全称为 Vue Command Line Interface是一个基于 Vue.js 进行快速开发的完整系统。它通过提供可选插件来增加项目的规模同时还提供了创建向导式的用户界面帮助我们快速生成一个 Vue.js 项目。Vue CLI 的主要特点如下 安装VUE Cli软件搭建开发环境1.1.*安装Node.js1.2.配置npm源 2.安装 VUE Cli3.创建工程3.1通常使用Vue的命令来创建VUE CLI工程并且会将工程创建在执行命令时的位置所以先在命令3.2.启动服务3.3.停止服务 Idea中启动项目终止启动 补充: 什么是Vue Cli
Vue CLI全称为 Vue Command Line Interface是一个基于 Vue.js 进行快速开发的完整系统。它通过提供可选插件来增加项目的规模同时还提供了创建向导式的用户界面帮助我们快速生成一个 Vue.js 项目。
Vue CLI 的主要特点如下
快速创建 Vue.js 项目的向导式用户界面我们只需要按照界面上的步骤一步步操作就可以快速创建一个 Vue.js 项目。支持自定义配置Vue CLI 提供了多种配置选项开发者可以根据自己的需求进行选择和配置。支持插件扩展Vue CLI 支持插件化扩展开发者可以根据需要安装插件例如路由、状态管理等。支持开箱即用的工具集成Vue CLI 集成了很多实用的工具例如 Babel、Webpack、ESLint 等。总之Vue CLI 是一个非常强大的工具能够极大地提升 Vue.js 开发效率和开发体验尤其适用于中大型项目的开发。
安装VUE Cli软件
搭建开发环境
1.1.*安装Node.js
首先需要下载Node.js安装包下载地址可参考
https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msihttps://mirrors.nju.edu.cn/nodejs/latest-v16.x/node-v16.14.2-x64.msihttps://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi
Node.js的安装过程没有特别的注意事项整个安装过程中都可以不必修改任何内容直至其自动安装完成。 此安装包会自动配置环境变量安装完成后可检查npm命令是否可用在操作系统的命令提示符下执
行以下命令即可
npm -v**注意**你必须在新的命令提示符窗口安装完Node.js后再打开的窗口中运行此命令。
1.2.配置npm源
nmp源即npm仓库称之为registry默认是境外服务器在国内使用时访问速度较慢通常在初次使用时应该将npm源更换为国内的服务器地址例如使用 https://registry.npmmirror.com作为npm源。
配置npm源的命令如下
npm config set registry https://registry.npmmirror.com当配置成功后可通过 get 命令可查看npm源
npm config get registry**注意**以上命令将显示当前生效的npm源但并不检查npm源的URL是否有效所以即使配置了错误的npm源也不会提示错误请认真检查是否配置了正确的URL。 **注意**无论你使用哪种操作系统必须保证当前登录的用户具有最高访问权限例如在Windows操作系统中请使用管理员模式的命令提示符并且不要使用Power Shell在Mac OS中请使用 sudo来执行以上命令。
2.安装 VUE Cli
安装VUE Cli的命令如下
npm install -g vue/cli此过程将从仓库服务器中下载VUE Cli通常耗时30秒至5分钟左右。 **提示**如果安装过程中的日志提示更新npm版本或提示某些软件版本偏旧等只要没有出现 ERROR字样均可无视。 **注意**以上操作仍需要管理权限才可以成功执行。安装完成后可通过以下命令检验VUE Cli是否安装成功
vue -V3.创建工程
3.1通常使用Vue的命令来创建VUE CLI工程并且会将工程创建在执行命令时的位置所以先在命令
提示符窗口中进入Vue Workspace自行指定的用于存放项目的文件夹例如以下示例中的 # 开头是注释不要执行
# 切换到D盘
d:
# 创建Vue的Workspace文件夹名称为Vue-Workspace是自定义名称
# 如果Vue的Workspace已经存在则不需要执行接下来这条命令
# 如果使用IntelliJ IDEA开发VUE CLI工程也可以直接使用IntelliJ IDEA的Workspace无强制
要求
mkdir Vue-Workspace
# 进入D盘下的Vue-Workspace
cd Vue-Workspace当进入Vue Workspace后就可以创建工程了。
使用 vue create 命令即可创建VUE CLI工程命令格式是
vue create 工程名称输入以上指令后按下 Enter 键将准备创建工程创建过程可能耗时较长注意不可反复按 Enter键否则会自动选择后续各设置选项的默认项。 创建过程中会有一些选项最先提示的选项是 Please pick a preset 表示“请选择一个预设项”推荐选择 Manually select features 表示“手动选择”通过键盘的上下箭头进行选择选择到目标项后按下键盘的 Enter 键到下一步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0jGhObs-1686279616902)
接下来的选项是 Check the features needed for your project 表示“选择你的工程中需要使用的功能”推荐在列表中选择 Babel 、 Router 、 Vuex 这3项使用键盘的上下箭头移动使用空格选中或取消选中选择完成后按下键盘的 Enter 键到下一步: 接下来的选项是 Choose a version of Vue.js that you want to start the project with 表示“选择你的工程中希望使用的Vue.js的版本”推荐选择 2.x 这项选择到目标项后按下键盘的 Enter键到下一步
接下来的选项是 Use history mode for router 表示“是否在路由中选择历史模式”推荐选择“是”输入 Y 后按下键盘的 Enter 键到下一步提示信息中 Y 是大写的表示它是默认选项不输入Y 而直接按下 Enter 键是等效的 接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? 表示“你习惯把一些配置信息存放在哪里”推荐选择In package.json即存放在 package.json 文件中选择到目标项后按下键盘的 Enter 键到下一步:
最后的选项是 Save this as a preset for future projects? 表示“是否保存以上配置信息作为后续将创建的新工程的预设”推荐选择“否”输入 N 后按下键盘的 Enter 键提示信息中 N 是大写的表示它是默认选项不输入N而直接按下 Enter 键是等效的: 至此配置过程已经结束接下来会自动创建工程耗时取决于网络速度通常需要30秒至5分钟左右。 如果未出现 Error 字样通常是创建成功了
3.2.启动服务
**注意**从现在开始你可以使用IntelliJ IDEA或类似的开发工具来打开你的项目并使用内置的Terminal执行各个命令使用方式与命令提示符窗口完全相同。进入工程目录执行 npm runserve 命令即可启动此工程的服务过程中会编译打包此工程
npm run serve当提示以下信息时表示工程已成功启动 当工程成功启动后即可根据提示的URL在浏览器中进行访问 3.3.停止服务 如果需要停止服务在控制台使用Ctrl C即可。 **提示**当按下Ctrl C后会提示 终止批处理操作吗(Y/N)? 其实当按下Ctrl C后服务已经被停止在此提示中无论选择 Y 或 N 结果都已经不重要了。
Idea中启动项目 终止启动
输入: Ctrlc 补充:
启动之后一般不需要重启 VUE Cli工程启动的服务支持热部署(热更新即:当保存对源代码的修改后会自动重新编译打包并覆盖原本已经启动的服务中的文件)并没有重启服务的做法如果在某些场景中需要实现“重启”的效果例如修改服务端口等)可以先停止服务然后再次启动服务。 此服务默认占用8080端口如果端口已经被占用将自动修改端口为8081或继续向后递增端口号 如需手动修改端口号在工程根目录下的package.json中修改scripts属性下serve的值: vue-cli-service serve --port端口号指定端口号:如需手动修改端口号在工程根目录下的package.json中修改scripts属性下serve的值: vue-cli-service serve --port 端口号提示:即使显式的指定了端口号如果指定的端口仍被其它服务占用仍会自动在指定端口号的值的基础上递增以使用新的端口号!例如显式的指定了使用9090端口如果9090被占用且9091可用时会自动改为使用9091端口。
