vue2创建项目的两种方式,配置路由vue-router,引入element-ui

提示:vue2依赖node版本8.0以上

文章目录

  • 前言
  • 一、创建项目基于vue-cli
  • 二、创建项目基于@vue/cli
  • 三、对吧两种创建方式
  • 四、安装Element ui并引入
  • 五、配置路由跳转
  • 四、效果
  • 五、参考文档
  • 总结


前言

使用@vue/cli脚手架vue create创建
使用vue-cli脚手架vue init webpack创建

一、创建项目基于vue-cli

1、查看nodejs版本

node -v

在这里插入图片描述
2、全局安装vue脚手架和webpack脚手架

npm install -g vue-cli
npm install -g webpack
npm install -g webpack-cli

在这里插入图片描述
在这里插入图片描述

3、新建vue2项目

vue init webpack test-vue2-webpack

在这里插入图片描述

创建选项除了,Install vue-router??选择是,其他选择的否

在这里插入图片描述

4、安装依赖并启动文件

 cd test-vue2-webpack
  npm install
  npm run dev

在这里插入图片描述

5、预览
在这里插入图片描述

6、目录结构
在这里插入图片描述

二、创建项目基于@vue/cli

1、如果安装了vue-cli,需要先卸载vue-cli

 npm uninstall -g vue-cli

在这里插入图片描述

2、全局安装vue脚手架和webpack脚手架

npm install -g @vue/cli
npm install -g webpack
npm install -g webpack-cli

在这里插入图片描述
在这里插入图片描述

3、新建vue2项目

 vue create test-vue2-create

e5e54444c931f2596981e91ba.png)

创建选项选择vue2项目

在这里插入图片描述
在这里插入图片描述
4、启动文件

这样创建的项目,不需要npm install,直接可启动

 cd test-vue2-create
 npm run serve

在这里插入图片描述

5、预览
在这里插入图片描述

6、目录结构
在这里插入图片描述

三、对吧两种创建方式

1、使用@vue/cli脚手架vue create创建项目,结构更简单,创建完直接安装完依赖,不需要手动npm install
在这里插入图片描述
2、使用@vue/cli脚手架vue create创建项目,安装的依赖更少
在这里插入图片描述
3、启动方式,启动方式可以自己配置,看个人习惯

//vue-cli  
npm run dev
//@vue/cli  
npm run serve

4、package.json配置npm run dev启动命令
在这里插入图片描述
在这里插入图片描述

四、安装Element ui并引入

安装和引用element-ui方式都相同,这里拿vue create 的test-vue2-create项目做演示

1、安装

npm i element-ui -S

在这里插入图片描述

2、引入
main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

在这里插入图片描述

3、按需引入

npm install babel-plugin-component -D

在这里插入图片描述
main.js

import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
//全部引用
// import ElementUI from 'element-ui';
// Vue.use(ElementUI);

//按需引用
import { Button,Input } from 'element-ui';
Vue.use(Button).use(Input);

Vue.config.productionTip = false



new Vue({
  render: h => h(App),
}).$mount('#app')


4、配置babel.config.js
babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}


在这里插入图片描述

5、修改app.vue

<template>
  <div id="app">
    <el-button>按钮</el-button>
    <el-input placeholder="输入框"></el-input>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {}
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述

6、启动项目预览

npm run dev

在这里插入图片描述

五、配置路由跳转

1、安装vue-router

npm install vue-router -S 

在这里插入图片描述

2、关闭创建vue component检查
vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

在这里插入图片描述

3、新建src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import My from '@/components/My.vue';
Vue.use(Router);
const routes = [
    { path: '/', component: Home },
    { path: '/my', component: My }
  ]
  
export default new Router({ routes })

在这里插入图片描述
4、新建src/components/Home.vue和src/components/My.vue
Home.vue

<template>
  <div class="home">
    <h1>Home页面</h1>
    <el-button @click="$router.push('/my')">去My</el-button>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>
<style scoped>
</style>

My.vue

<template>
  <div class="my">
    <h1>My页面</h1>
    <el-button @click="$router.push('/')">去Home</el-button>
  </div>
</template>

<script>
export default {
  name: 'My',
}
</script>
<style scoped>
</style>

在这里插入图片描述

5、修改App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {}
}
</script>
<style>
</style>

在这里插入图片描述

6、修改main.js

import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
//全部引用
// import ElementUI from 'element-ui';
// Vue.use(ElementUI);

//按需引用
import { Button,Input } from 'element-ui';
Vue.use(Button).use(Input);

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

在这里插入图片描述

四、效果

在这里插入图片描述
在这里插入图片描述

五、参考文档

1、vue2官网
2、Element UI官网

总结

踩坑路漫漫长@~@

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/533205.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

leetCode第十题 : 正则表达式匹配 动态规划【10/1000 python】

&#x1f464;作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作http://t.csdnimg.cn/Q59WX 作者专栏每日更新&#xff1a; LeetCode…

软考120-上午题-【软件工程】-软件开发模型02

一、演化模型 软件类似于其他复杂的系统&#xff0c;会随着时间的推移而演化。在开发过程中&#xff0c;常常会面临以下情形&#xff1a;商业和产品需求经常发生变化&#xff0c;直接导致最终产品难以实现&#xff1b;严格的交付时间使得开发团队不可能圆满地完成软件产品&…

Docker安装nacos教程

目录 1.首先拉取nacos镜像2.启动容器&#xff0c;3.查看容器id4.复制容器内的 /home/nacos目录下的logs,data,conf目录到容器外&#xff08;docker cp 后的容器id可以缩略写前几位&#xff09;5.进入上一步操作的conf目录&#xff0c;修改目录下的application.properties的文件…

FORM的引入与使用

FORM的引入与使用 【0】引入 ​ 表单&#xff08;Form&#xff09;是网页中用于收集用户输入数据的一种交互元素。通过表单&#xff0c;用户可以输入文本、选择选项、上传文件等操作。表单通常由一个或多个输入字段&#xff08;Input Field&#xff09;组成&#xff0c;每个字…

【重磅推荐】2024七大零售行业线下开店超全指南大全共452份

如需下载完整PPTX可编辑源文件&#xff0c;请前往星球获取&#xff1a;https://t.zsxq.com/19F4dDDrv 联华快客便利店的加盟手册.docx 好德便利店加盟手册.docx 超市&便利店守则:商品退换货管理.docx 赠品管理制度.doc 选址必看.doc 新人续签考核作业.doc 物流箱管理制度.d…

第04章 计算机常用通信指标和术语视频课程

4.1 本章目标 掌握bit、Byte、KB、MB、GB、TB概念和换算关系掌握波特率、比特率、误码率的概念掌握信道、基带信号、频带信号概念了解多路复用、频分多路复用、时分多路复用了解同步传输、异步传输概念 4.2 bit、Byte、KB、MB、GB、TB概念和换算关系 4.2.1 概念与换算 4.2.2…

SinoDB备份恢复工具之dbexport/dbimport

dbexport和 dbimport是两个简单的备份恢复实用程序&#xff0c;无需任何提前配置即可运行。这两个实用程序可以在不同平台的SinoDB数据库服务器之间迁移数据&#xff0c;可以使用它们备份和还原小型数据库。 1. dbexport命令语法 dbexport以文本格式导出数据库中所有对象的模式…

ENSP防火墙配置VRRP负载分担[图片配置步骤],VRRP简介

配置目标 1.实现同一区域设备分别走两条线路进行通信 2.当一侧线路故障时切换至备份线路 拓扑搭建 配置接口地址及安全区域 fw1&#xff1a; fw2&#xff1a; 配置安全策略 fw1/fw2 配置默认路由 fw1&#xff1a; fw2&#xff1a; 配置IP-link fw1 fw2 配置vrrp FW1&am…

OpenHarmony开发技术:【国际化】实例

国际化 如今越来的越多的应用都走向了海外&#xff0c;应用走向海外需要支持不同国家的语言&#xff0c;这就意味着应用资源文件需要支持不同语言环境下的显示。本节就介绍一下设备语言环境变更后&#xff0c;如何让应用支持多语言。 应用支持多语言 ArkUI开发框架对多语言的…

机器学习和深度学习-- 李宏毅(笔记与个人理解)Day8

Day 8 classification &#xff1a;Probabilistic Generative Model 今天上了一整天的课&#xff0c; 本来实在是更新不动了&#xff0c;但是看到《剑来》更新了&#xff0c;想一想这本书里面一直强调的成功的feature – 心性&#xff0c;嗯心性坚毅就好&#xff01;主人公陈平…

实战项目——智慧社区(二)之 物业管理

分页 用于分页封装的实体类 Data public class PageVO {private Long totalCount;private Long pageSize;private Long totalPage;private Long currPage;private List list; }分页的相关配置 package com.qcby.community.configuration;import com.baomidou.mybatisplus.e…

乡村智慧化升级:数字乡村打造农村生活新品质

目录 一、乡村智慧化升级的内涵与意义 二、乡村智慧化升级的具体实践 1、加强农村信息基础设施建设 2、推广智慧农业应用 3、提升乡村治理智慧化水平 4、丰富智慧乡村生活内容 三、数字乡村打造农村生活新品质的成果展现 1、农业生产效率与质量双提升 2、农民收入与消…

OSCP靶场--Peppo

OSCP靶场–Peppo 考点(ident枚举服务用户名ssh登陆rbash绕过 docker提权) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.158.60 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-10 09:32 EDT Nmap scan report…

SQLite数据库在Linux系统上的使用

SQLite是一个轻量级的数据库解决方案&#xff0c;它是一个嵌入式的数据库管理系统。SQLite的特点是无需独立的服务器进程&#xff0c;可以直接嵌入到使用它的应用程序中。由于其配置简单、支持跨平台、服务器零管理&#xff0c;以及不需要复杂的设置和操作&#xff0c;SQLite非…

进程控制(一)

文章目录 1. 进程创建1.1 fork函数初识1.2 fork函数返回值 2. 写时拷贝3. 进程终止3.1 进程退出场景3.2 进程常见退出方法3.3 exit函数3.4 return退出 4. 进程等待4.1 进程等待必要性4.2 进程等待的方法4.2.1 wait方法4.2.2 waitpid方法4.2.3 获取子进程status 1. 进程创建 1.…

MySQL8.0的下载、安装配置教程、连接数据可视图形化界面和卸载及MySQL基本使用教程

文章目录 MySQL8.0下载安装MySQL卸载常见问题解决方式MySQL基本使用教程&#xff08;使用MySQLworkbench&#xff09; 1、创建数据库2、创建表、删除表3、修改表的名字4、为数据表增加、修改、删除字段5、关于修改数据库名字6、拓展&#xff1a;pycharm操作MySQL 首先&#…

uniapp区分app、h5、小程序

APP端 标签内 <!-- #ifdef APP-PLUS --><view> APP端 </view> <!-- #endif --> JSCSS内 /*#ifdef APP-PLUS*/console.log(APP端) /*#endif*/ H5端 标签内 <!-- #ifdef H5 --><view> H5端 </view> <!-- #endif --> JSC…

uniapp中页面滚动锚点位置及滚动到对应高度显示对应按钮

可以把页面代码和组件代码放自己项目里跑一下 页面代码 <template><view class"Tracing-detail"><view class"title" v-for"i in 30">顶部信息</view><!-- tab按钮 --><Tab v-model"activeIndex" …

计算机网络 Telnet远程访问交换机和Console终端连接交换机

一、实验要求和内容 1、配置交换机进入特权模式密文密码为“abcd两位班内学号”&#xff0c;远程登陆密码为“123456” 2、验证PC0通过远程登陆到交换机上&#xff0c;看是否可以进去特权模式 二、实验步骤 1、将一台还没配置的新交换机&#xff0c;利用console线连接设备的…

Vue实现防篡改水印的效果。删除元素无效!更改元素属性无效!支持图片、元素、视频等等。

1、演示 2、水印的目的 版权保护&#xff1a;水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息&#xff0c;以防止未经授权的复制、传播或使用。当其他人使用带有水印的内容时&#xff0c;可以追溯到原始作者或版权所有者&#xff0c;从而加强版权保护。 身份识…