前端基础开发
Vue-cli主要的功能是自动生成Vue的项目模板,提高开发效率


搭建流程

  1. 先下载node.js LTS并安装:node.js的npm,用于管理前端项目包依赖,说明:前面我们讲解前端技术栈的时候用过node.js(10.16.3),这里我们先卸载一把,安装14.17.3这个版本,方便我们使用vue3。
    • 安装node-v14.17.3-x64.exe。各种next安装完成
    • cmd中,node -v , nmp -v 验证是否安装成功,会显示版本号v14.17.3 , 6.14.13
    • cmd中运行,全局安装Vue cli插件命令,npm install -g @vue/cli,这样我们就可以创建Vue工程
  2. 使用命令行创建vue项目
    • 创建项目文件夹。生成的文件保存到这个文件夹中,相当于手动新建一个前端的项目文件夹。我创建的D:\资料文档\自考\8JAVA\JavaCode\ssm_vue3
    • 在当前文件夹位置,打开cmd。即在目的文件夹的地址栏打开cmd。
    • 运行指令,vue create ssm_vue3
    • 选择以下条目:
      • Manually select features
      • Babel(空格进行选择或取消)
      • Router
      • Vuex
      • 取消选择Linter/Formmater 严格的规格化,不利于新手
      • Choose a version:3.x
      • Use history model:Y ;选择路由模式
      • in package.json ;选择项目依赖包的管理方式
      • save:Y
      • save preset as: ssm_vue ; 自定义一个配置名,以后可以复用
    • 按它的提示界面,依次执行命令,cd ssm_vue3,npm run serve。弹出网络连接,允许访问
    • 显示App运行的地址。可以按提示在浏览器登录:http://localhost:8080/ ,能够正常显示vue页面,说明操作成功。
  3. IDEA中打开
  • 直接把该项目文件夹,拖到IDEA的图标,即可使用IDEA打开。简直不要太粗暴。
  • IDEA中配置,让它能够在IDEA里面启动。
    • Add configuration…
    • +npm ;Scripts:选择serve;配置Node interpreter:找到nodejs的安装目录,选择node.exe。OK
  • 注意:如果不能识别vue.exe,需要安装vue.js插件。
    • settings ->plugins -> 搜索vue.js回车

Element 各版本说明

1、Element Plus 是 Element 对 Vue 3.0 的升级适配
2、Element 诞生于 2016 年,起初是饿了么内部的业务组件库,开源后深受广大前端开发者的喜爱,
成为 Vue 生态中最流行的 UI 组件库之一。
3、Element Plus 是重构的全新项目。Element 团队重写了 Element 的代码,用于支持 Vue3
4、Element UI 还在维护和升级,因为 Vue2 仍然有项目在使用, Vue3 支持的浏览器范围
有所减少, 这是一个大的改变, 所以在一段时间内, Vue2 仍然会在项目使用.

安装,在cmd命令下
#NPM
$ npm install element-plus --save

Logo

前往低代码交流专区

更多推荐