目录
2.2 vue/cli 安装失败，让你升级到npm 10.2.3
2.4 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。
Vue简介
Vue.js（通常简称为Vue）是一个开源的渐进式JavaScript框架，用于构建用户界面。它由尤雨溪（Evan You）在2014年创建并维护至今。Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的单页应用程序（SPA）提供强大的功能。
Vue采用了一种声明式的编程风格，允许开发者声明式地描述应用程序的界面如何响应数据变化。其主要特性包括组件化、指令系统、强大的模板系统、状态管理以及路由管理等。Vue还通过Vue CLI（命令行工具）、Vuex（状态管理模式）和Vue Router（路由管理器）等官方库提供了完整的前端开发解决方案。
Vue因其灵活性、易用性以及高性能，在web开发领域迅速获得了广泛的认可和使用。
1 在cmd窗口创建VUE工程
1.前期环境搭建
安装好nodejs, nvm (yarn是否安装看个人)
搭建好前期环境后
重新打开一个命令窗口
此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用
输入 npm -v 命令，检查npm是否可用，注意v是小写的
如果显示版本就是OK的，这里如果是8.5.0版本也是正确的！
2.配置npm源
确认npm命令可用后，就可以配置npm源
-
- nmp源（即npm仓库，称之为：registry）默认是境外服务器
- 在国外访问速度较慢，通常在初次使用时，应该将npm源更换为国内的服务器地址
- 例如使用 https://registry.npmmirror.com作为npm源
使用命令：
npm config set registry https://registry.npmmirror.com配置后可以使用get命令查看npm源
npm config get registry注意：这个命令只能获取到你配置的源，无法检查是否正确！请认真检查url
3.安装VUE CLI
- 配置好npm源后，就可以安装VUE CLI(VUE脚手架)了,此过程将从仓库服务器中下载VUE Cli，通常耗时30秒至5分钟左右。
命令： npm install -g @vue/cli
只要安装显示的文字中没有出现ERROR就可以，警告(提示更新npm版本或提示某些软件版本偏旧等)都可忽略
注意：无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符，并且，不要使用Power Shell，在Mac OS中，请使用 sudo来执行以上命令。
@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
@vue/cli的好处：开箱即用，支持webpack/babel/css/less/开发服务器支持
- 安装完毕后，可以验证一下，命令： vue -V 注意：这里的V是大写的！
可以看到当前的VUE Cli：@vue/cli 5.0.8
准备好上面的环境后，我们就可以动手创建工程了！
我们先来练习一下在Windows Shell中创建工程
注意：必须是管理员身份，最高权限！
4.创建VUE CLI工程
通常用vue命令来创建VUE CLI工程，并且会将工程创建在执行命令时的位置，所以，可以先进入准备存放项目的文件夹再创建项目
- 建议切换到其他盘，不要在系统盘里存放项目，命令： d:
- 在对应的盘下创建一个文件夹，当做VUE项目的工作空间，命令： mkdir Vue-Workspace
- 进入到刚刚创建好的文件夹，命令： cd Vue-Workspace
- 创建VUE项目，格式：vue create 项目名，命令： vue create vue-project-01
- 下面即将进入创建项目时的各项选项配置，一定要慢，不要连续敲回车，会自动选择下一个选项的默认项！按图示步骤操作即可：
选择配置的方式：
- 按上下键移动
- 空格键选中 再按一次取消选中
- 回车键进入下一项配置
TypeScript 和 Linter看个人 本人是比较喜欢的。
2 在IDEA中创建VUE工程
1 IDEA创建-启动-停止VUE工程步骤
- 在IDEA中打开下方的Terminal工具,输入命令
- 首先输入 npm 命令,如图所示,如果提示"不是可运行的程序或批处理文件",需要重启IDEA
- 创建v1项目
- 进入到v1文件夹下,并启动项目
npm run serve命令启动工程的服务时，会变异打包此工程，当提示如下消息时，表示工程已成功启动：
2 可能出现的问题与解决方案
2.1 浏览器显示无法访问或拒绝访问
原因：服务停止了
解决方案：服务只有启动才可以访问，需要启动服务后再进行测试
2.2 vue/cli 安装失败，让你升级到npm 10.2.3
解决方案：实际执行了update升级指令也是不行的，直接安装与node -V 16版本匹配的vue/cli版本 5.0.8
指令：npm install -g @vue/cli@5.0.8
2.3 启动项目时满屏 npm ERR!
原因：可能未在VUE工程项目文件夹下启动项目
解决方案：进入VUE项目文件夹，再启动
2.4 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。
拉取或拷贝项目后，启动项目，但出现如上提示
原因：可能是项目里没有node_modules
解决方案：执行 npm install 命令，再次启动项目即可
2.5 IDEA的Terminal终端没办法敲命令
原因：IDEA打开了Windows新版本的命令行工具powershell，并没有打开cmd
解决方案：
- 打开IntelliJ IDEA。
- 进入设置：File > Settings（在Mac上是IntelliJ IDEA > Preferences）。
- 在设置窗口的左侧，导航至Tools > Terminal。
- 在右侧的Shell path字段中，你需要输入CMD的路径，通常是C:\Windows\System32\cmd.exe。
- 点击Apply然后点击OK来保存你的更改。
完成这些步骤后，当你在IDEA中打开一个新的终端窗口，它应该会启动CMD而不是PowerShell。
如果你遇到任何问题，比如权限不足（如错误CreateProcess error=740），你可能需要以管理员权限运行IDEA，或者确保你的用户账户有足够的权限运行CMD。
3 关于VUE Cli
在使用VUE之前，你需要：
- 在你的电脑上安装Node.js,并配置环境变量
- 在你的电脑上配置npm源，使得它可以更快速、更稳定的下载所需的资源
- 在你的电脑上安装VUE Cli
- 以上操作对于每台电脑都是一次性操作
4 修改项目启动端口号
默认端口号8080，但此端口号使用频率高，存在被占用的情况，所以我们可以修改端口号：
- 打开package.json配置文件
- 在约第6行的位置添加 --port 9090 ，9090就是我们新修改的端口号
- 重新启动我们的项目，可以看到端口号已被改成了9090
4 安装Vue.js插件
- 打开File下的设置Settings，找到插件Plugins，在市场中搜索vue,如果没有安装，点击Install安装
- 安装完毕后可以在Installed中看到已安装的插件
- 点开App.vue文件，如果上面有如下提示，也是需要安装插件
5 VUE Cli 热部署测试
- VUE Cli工程启动的服务支持热部署
- (热更新，即：当保存对源代码的修改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件)
- 打开App.vue文件，可以在里面添加内容
- 点击项目访问链接可以看到网页内容立即发生改变
试试看：
启动项目，在浏览器中访问主页，在IntelliJ IDEA中打开App.vue并修改其中的显示文本，切换回浏览器，你会发现浏览器中显示的页面已经自动刷新为你修改后的效果
Vue脚本架工程启动的服务支持热部署
（热更新，即：当保存对源代码的修改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件）
并没有重启服务的做法，如果在某些场景中需要实现“重启”的效果（例如修改服务端口等），可以先停止服务，然后再次启动服务
3 VUE的使用
1 "搭积木"的开发体验
- 默认的主页是由以下3个文件完成显示的：
-
- /App.vue
- /views/HomeView.vue
- /components/HelloWorld.vue
试试看：
分别修改以上3个文件中的显示文本，看看浏览器的哪些区域发生了变化？
2 App.vue代码讲解
router-link类似于a标签，to属性在/router/index.js中有配置
<!--HTML写在template标签中-->
<template>
<h1>热部署测试aaa</h1>
<nav>
<!-- 脚手架工程中的router-link相当于超链接a标签 -->
<!-- 区别:超链接a跳转时页面整体刷新 router-link跳转时页面不会整体刷新，局部刷新 -->
<!-- /相当于根，点Home时url为：http://localhost:9090/ -->
<router-link to="/">Home主页</router-link> |
<!-- 点About时url为：http://localhost:9090/about -->
<router-link to="/about">About关于</router-link> |
<router-link to="/other">其他关于</router-link>
</nav>
<!-- router-view用来表示可变区域 -->
<router-view/>
</template>
<!--CSS写在style标签中-->
<style>
/*public下的index.html中的内容设置样式*/
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
/*让文字不要有锯齿，更平滑*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
/* 设置上面导航栏的内间距 */
nav {
padding: 30px;
}
/* 设置上面导航栏链接的文字颜色与字重 */
nav a {
font-weight: bold;
color: #2c3e50;
}
/* 设置激活的超链接文字用不同的字体颜色 */
nav a.router-link-exact-active {
color: #42b983;
}
</style>\3 HomeView.vue代码讲解
<!--HTML内容写在template标签中-->
<template>
<div class="home">
<!-- logo图片 -->
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<!-- vue自带的自定义的组件HelloWorld 具体:/components/HelloWorld.vue -->
<HelloWorld msg="Welcome to Your Vue.js App欢迎小可爱"/>
</div>
</template>
<!--JavaScript内容写在script标签中-->
<script>
// @ is an alias to /src
// 导入自定义组件HelloWorld后才能使用
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>4 index.js代码讲解
- 假如to里写的path是"/",那么就会显示对应component的HomeView.vue中的内容
- 假如to里写的path是"/about",那么就会显示对应component的AboutView.vue中的内容
类似于后端工程在方法上加:@RequestMapping("/v1/users/reg")localhost:8080/v1/users/reg就会找此方法提供服务
import { createRouter, createWebHistory } from 'vue-router'
//预加载：提前加载(只有这个是预加载)
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
//箭头函数：懒加载，用到了再加载
component: () => import( '../views/AboutView.vue')
},
{
path: '/other',
name: 'other',
//箭头函数：懒加载，用到了再加载
component: () => import( '../views/OtherView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router5 新view.vue 的创建方式
- 在 v1/src/App.vue中添加新view文件的router-link链接
- 在v1/src/views文件夹下创建一个新的VueComponent(也就是.vue文件)
- 编写新创建好的.vue文件
-
- template标签中放的是HTML
- style标签中放的是CSS
- script标签中放的是JS
注意:vue3的script开始标签中必须要有setup,否则代码不生效！
- 还需要在v1/src/router/index.js文件中配置路由跳转的路径
-
- path就是App.vue中router-link标签中to属性的值
- 箭头函数加载的就是对应的.vue文件的路径
- 写完可以启动项目访问：http://localhost:9090/ 进行测试，如果看到了下图所示的内容，则表明配置成功了
引入Element Plus
安装使用Element Plus
- 百度直接搜索: elementplus，找到官网https://element-plus.org/zh-CN/
- 点击上方的"指南"-->"安装"-->"使用包管理器"
- 打开IDEA终端 注意：如果有未关闭的VUE项目，要先终止项目
- 复制"使用包管理器"中的第1句命令，回车执行安装，安装成功后重启项目
5.找到"快速开始"-->并复制图示的两句代码
- 找到VUE项目中的main.js文件，粘贴刚刚复制的这两行代码，如图所示：
- 并且要在下面的代码中添加：
//.use(ElementPlus) 引入ElementPlus组件库
createApp(App).use(ElementPlus).use(store).use(router).mount('#app')
- 在App.vue 与 KView.vue 文件中完成如下代码：(添加el-button进行测试)
- 测试：若页面按钮有样式效果，说明ElementPlus组件库安装成功
安装element提示插件
- 停止正在运行的vue项目
- File-->Settings-->Plugins-->MarketPlus打开插件市场
- 搜索element，并点击Install安装
- 安装好后需要重启IDEA,点击"Restart IDE",继续选择"Restart"即可
5.重启IDEA后，启动项目，再进行测试，如果有提示，说明插件安装成功了
进行elementplus图标全局注册
- 在如下网址：找到并复制图中的代码
https://element-plus.org/zh-CN/component/icon.html#注册所有图标
- 在main.js中粘贴刚刚复制的代码(引入EL图标相关内容 )
- main.js完整代码(这是一次性的代码，无需多次配置)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//1.引入Element框架相关内容
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//4.引入EL图标相关内容 https://element-plus.org/zh-CN/component/icon.html#注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
//3. .use(ElementPlus) 引入ElementPlus组件库
app.use(ElementPlus).use(store).use(router).mount('#app')
//2. createApp(App)创建一个vue实例 .use(store)添加全局存储vuex .use(router)添加路由router
// mount挂载，将前面拿出来的App.vue中的内容放到/public/index.html页面中
//createApp(App).use(store).use(router).mount('#app')引入ArcoDesign组件库
安装组件库所需库
组件库：Arco Design Vue
快速上手：Arco Design Vue
执行命令：
npm install --save-dev @arco-design/web-vue在项目文件 main.js 引入
安装依赖 在命令行输入一下命令
npm i
or
yarnpackage.json 目前所有依赖
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@arco-design/web-vue": "^2.55.3",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
"typescript": "~4.5.5"
}
}
使用卡片组件测试
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
