当前栏目
使用HBuilderX软件快速搭建Vue项目
1.node.js环境下载
node.js相当于java中jdk,但是是在服务器端的 JavaScript,需要通过npm去管理node.js的包,通过npm可以下载node.js中的扩展
①首先下载node.js的安装包
https://nodejs.org/zh-cn/download/releases/(以往版本)
②选择node.js的下载路径配置环境变量(一般会自动配置)
与jdk的环境变量配置类似,复制你node.js的安装路径
③配置完环境变量之后可以在cmd中使用node -v与npm -v命令去查看下载node.js是否下载成功
2.创建一个Vue-cli项目
对于后端程序员来说,使用工具进行快速的项目创建是成本最低的方式,这里采用的是HBuilderX软件进行的辅助搭建,Vue项目也可以使用node.js环境中的命令进行搭建,此处不过多阐述
使用HbuilderX可以快捷创建一个vue项目,点击新建时可以选择vue项目的版本,这里选择2.6.10版本
创建之后需要等待一段时间,等待项目创建成功后,右下角会出现一个提示框(这一步需要从服务器端下载许多封装的文件)
项目创建成功后点击Hbuilder底部的命令行窗口中间的图标,可以打开项目的终端,成功打开后使用npm run serve命令即可运行项目
在终端使用ctrl+c命令可以终止项目运行
3.下载组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
①安装
项目终止后可以在终端中使用npm i vue-router@3.5.3命令下载vue-router插件包
1. 创建 router 目录
在该目录下创建 index.js 文件,在其中配置路由,每次新加入一个组件就需要在index.js中导入
import Vue from 'vue'; import router from 'vue-router'; /* 导入路由 */ /* 导入组件 */ import Login from '../Login.vue'; import Main from '../Main.vue'; Vue.use(router); /* 定义组件路由 */ var rout = new router({ routes: [ { //path是自定义的组件地址 path: '/login', name: 'Login', //component是是对应上面导入的组件名称 component: Login }, { path: '/main', name: 'Main', component: Main } ] }); //导出路由对象 export default rout;
2.使用路由
在主组件App.vue中的template标签写入
< router-link to="/index">首页< /router-link> < router-link to="/content">内容< /router-link> < router-view/>
3.在 main.js 中配置路由
import router from './router/index.js' Vue.use(router); new Vue({ el: '#app', router, render: h => h(App) })
4.下载elementUI框架
①在终端使用npm i element-ui -S命令下载ElementUI框架
②在 main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount('#app');
相关文章
- Figma Variants组件集/变体组件(四)
- 用 Go 重写 Node.js 服务:项目性能提升 5 倍,内存减少 40%
- jQuery已“死”?为清除技术债,我们删掉了前端所有jQuery依赖
- JavaScript 技术篇 - Node.js、npm的安装过程演示
- JavaScript 技术篇 - js读取Excel文档里的内容实例演示,js如何读取excel指定单元格的内容,js将excel的内容转化为json字符串方法
- JavaScript 技术篇 - js在一个元素节点下包含多个text文本情况下的指定文本提取方法
- JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法
- JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
- 为什么旧域名建设的网站不收录 如何解决这个问题
- 使用 QueryBuilder 构造复杂的数据筛选语句
- Git 技术篇 - Github在项目分支里下载某个文件方法,Github项目里的单个js文件下载实例演示
- 标准化思想及组装式架构在后端BFF中的实践
- react各阶段生命周期执行情况
- 代理模式的新花样,istio秀肌肉!
- 学习如何使用JavaScript 生成各种好看的头像!
- PyQt5 技术篇-QTableWidget表格组件的行选择与列选择实例演示,表格组件的双击事件捕获,获取表格选中单元格的值
- PyQt5 技术篇-设置QTableWidget表格组件默认值实例演示,如何获取QTableWidget表格组件里的值,获取表格的行数和列数
- PyQt5 技术篇-QSpinBox选值框值改变触发事件实例演示,获取QSpinBox组件的值,选值框的边界值设置方法
- 浅谈Web容器设计的边界和目标
- Flutter实现电影院选座效果!