前端项目导入vue和element

已于 2023-11-09 03:15:30 修改
阅读量640 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-11-08 14:44:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46290090/article/details/134280845
版权

1.安装nodejs

下载链接icon-default.png?t=N7T8https://cdn.npmmirror.com/binaries/node/v18.18.0/node-v18.18.0-x64.msi

进入cmd 命令行模式 管理员身份运行

输入 （node -v）能看到版本号

npm config set prefix "C:\Program Files\nodejs"  默认路径

npm config set prefix " 写你安装的路径 "

切换npm 的淘宝镜像（npm config set registry https://registry.npm.taobao .org）

2.安装vue/cli

输入（ npm install -g @vue/cli ）

 出现错误 根据错误  搜索

安装好了 输入（nue  ui）

浏览器自动打开  （http://localhost:8000） 这个网页 我们在这里创建项目

桌面创建一个文件夹复制路径       get 关掉

路径改好了 输入项目名称 点击创建

 

点击创建就行了

然后刚刚启动vue 的cmd 窗口 能看到 创建项目

 等几分钟完成

 

启动项目 

导入vscode 搜索框输入npm

选择第一个 然后就启动了

看到这个已经启动了    

​

    打开浏览器输入  http://localhost:8080/然后看到vue的见面

​

先停掉项目

进入vscode终端按ctrl+c

 安装element

vscode 里面项目文件夹（右键） 点击（在集成终端中打开）

输入 npm install element-ui@2.15.3

 出现错误 根据错误  搜索

项目文件里  看到这个文件 "node_modules\element-ui"已经安装好了

引入elemnt

vue.config.js

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

main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// eliment引入的
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
// eliment引入的
Vue.use(ElementUI);

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

app.vue

<template>
  <div>
    <!-- <h1>{{ message }}</h1>  -->

    <!-- <emp-view></emp-view> -->
    <element-view></element-view>

  </div>
</template>


<script>
import  ElementView from './views\element\ElementView.vue'


export default {

  components: { ElementView},
  data() {
    return {
      message: "hello vue111",
    }
  },
  methods: {

  }
}
</script>
<style></style>

 ElementView.vue

<template>
  <div>
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <!--     <el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row> -->

    <!-- 表格 -->
    <br>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
    <el-pagination background layout="total,sizes, prev, pager, next, jumper, ->,  slot" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :total="1000"></el-pagination>
    <div>
      <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
      <br>
      <!-- 对话框 -->
      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
      </el-dialog>


      <!-- 对话框for -->
      <el-button type="text" @click="dialogFormeVisible = true">打开嵌form的 Dialog</el-button>
      <!-- <el-table title="form表单" :visible.sync="dialogFormeVisible"></el-table> -->
      <el-dialog title="收货地址" :visible.sync="dialogFormeVisible">
        <el-input v-model="input" placeholder="请输入内容"></el-input>

      </el-dialog>


      <br>

      <!-- 对话框for -->
      <el-button type="text" @click="Visible = true">打开嵌套表格的 Dialog</el-button>
      <el-dialog title="收货地址" :visible.sync="Visible">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-table :data="gridData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>

      </el-dialog>


    </div>
    <el-button type="text" @click="Visibleed = true">打开嵌套表格的 Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="Visibleed">
      
      <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

    </el-dialog>

  </div>
</template>

<script>

export default {
  data() {
    return {
      form:{
        name: '',
          region: '',
          date1: '',
          date2: '',
      },
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      dialogFormeVisible: false,
      Visible: false,
      Visibleed: false,



      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
      ],
    };

  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录变化" + val)

    },
    handleCurrentChange: function (val) {
      alert("每页记录数变化" + val)

    },
    onSubmit:function(){
        alert(JSON.stringify(this.form));
    }
  }
};









</script>

<style ></style>

自己创建一个文件 src\views\名字文件夹的\ElementView.vue 注意大小

app.文件

错误

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: day5-demo@0.0.0
npm ERR! Found: vue@3.0.2
npm ERR! node_modules/vue
npm ERR!   peer vue@"3.0.2" from @vue/compiler-sfc@3.0.2
npm ERR!   node_modules/@vue/compiler-sfc
npm ERR!     peer @vue/compiler-sfc@"*" from rollup-plugin-vue@6.0.0-beta.10
npm ERR!     node_modules/rollup-plugin-vue
npm ERR!       rollup-plugin-vue@"^6.0.0-beta.10" from vite@1.0.0-rc.6
npm ERR!       node_modules/vite
npm ERR!         dev vite@"^1.0.0-rc.1" from the root project
npm ERR!     @vue/compiler-sfc@"^3.0.0-rc.10" from vite@1.0.0-rc.6
npm ERR!     node_modules/vite
npm ERR!       dev vite@"^1.0.0-rc.1" from the root project
npm ERR!     1 more (the root project)
npm ERR!   vue@"^3.0.0-rc.10" from vite@1.0.0-rc.6
npm ERR!   node_modules/vite
npm ERR!     dev vite@"^1.0.0-rc.1" from the root project
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! vue-router@"4.0.13" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@3.2.41
npm ERR!   peer vue@"^3.2.0" from vue-router@4.0.13
npm ERR!   node_modules/vue-router
npm ERR!     vue-router@"4.0.13" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\zeyi\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

根据错误提示，在命令行中加入–legacy-peer-deps，由于vue与vue-router版本兼容的问题，需要在安装语句后加入需要下载vue-router版本，不然会下载最新的vue-router版本。

npm install --legacy-peer-deps vue-router@4.0.13

也有可能因为是你要下载的router版本过高，如果下载版本过高，在启动项目时会报错，可以下载低版本的vue-router

npm install vue-router@3.1.3 --save-dev

最后在package.json文件中查看是否下载成功

npm install element-ui@2.15.3

错误

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Local\npm-cache\_logs\2022-06-14T08_44_12_502Z-debug-0.log

  1. 删除node_modules和package-lock.json，然后运行

    npm install

  2. 或尝试清除NPM缓存

    npm cache clean --force

  3. 或使用--legacy-peer-deps选项运行命令

    npm install --legacy-peer-deps

  4. 或使用--force选项运行命令

    npm install --force
  5. npm install element-ui@2.15.3

错误

 

npm install --legacy-peer-deps

A complete log of this run can be found in: C:\Users\Mamkap\AppData\Local\npm-cache\_logs\2023-11-08T03_49_10_551Z-debug-0.log
Waiting for the debugger to disconnect...

  1. 执行 npm install npm@latest -g 升级到最新版本（若升级到最新版本还是报错，则还需要再全局更新一下npm，更新后检查npm版本号不会变，内部应该有更新）；
  2. .删除本地node_modules 依赖包；
  3. 执行 npm cache clean --force 清理缓存；
  4. npm i 安装依赖；
    以上过程，尝试一次不行，可以多尝试几次就OK了

错误

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vol.vue3@0.1.0
npm ERR! Found: vue@3.2.20
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.17" from element-ui@2.15.6
npm ERR! node_modules/element-ui
npm ERR!   element-ui@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2021-10-11T06_27_44_908Z-debug.log

npm i element-ui @xdh/my --legacy-peer-deps

npm install npm -g 更新一下

我这里是使用清除npm的缓存解决的 （npm cache clean --force）

错误

解决方案：

降级npm到6版本，在终端运行以下命令

npm install --legacy-peer-deps

npm install vue@2.5.17 --save

npx -p npm@6 npm i --legacy-peer-deps

这个错误通常是由于 npm 无法解决依赖关系而引起的。你可以尝试以下几个步骤
1.清除npm 缓存: npm cache clean --force
2.更新 npm: npm install -g npm@latest
3.删除 node modules 文件夹:rm -rf node modules
4.删除 package-lock.json 文件: rm -rf package-lock.json
5.重新安装依赖: npm install 

mamkap001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 纯前端导入Excel
ChickenBro_的博客
03-27 816
1.vue-cli脚手架搭好框架 2.npm install xlsx --save 3.代码 <template> <div> <el-row class="handle-box" :gutter="24"> <el-col :span="17" class="head"> ...
Idea导入Vue前端项目
weixin_43774759的博客
04-20 3403
需要idea中配置VUE.js插件 导入项目后，项目结构如下 直接运行的话，在idea下方选择terminal，直接输入rpm run dev即可运行。 出现下图所示，标识运行成功，点击项目地址链接，即可看到项目主页 自己也可以创建一个页面，简单操作一下 首先在项目的src 路径下创建一个views目录，用于存放自己创建的vue组件 在views下创建一个vue组件 填写名称 ...
启动前端项目
qq_33537936的博客
03-01 9202
启动前端项目启动前端项目：开启跨域 启动前端项目： 1、安装nodejs 安装《软件安装包》目录下的 node-v12.18.2-x64.msi 打开命令行，输入node -v和npm -v，能正确显示版本号就是安装成功了。 2、安装淘宝cnpm npm都是国外的源，下载速度比较慢，我们安装cnpm速度会快一点。 https://developer.aliyun.com/mirror/NPM 打开命令行，输入npm install -g cnpm --registry=https://registry.
Vue的导入和基本用法
qq_55278081的博客
08-15 467
再安装Vue版本（我这里安装的是2.6.10版本的）:npm install vue@2.6.10。Vue的导入：在终端中先初始化：npm init -y。
vue项目前端埋点的实现
10-17
在Vue项目中实现前端埋点是一项关键任务，用于收集用户行为数据，以便分析用户交互、优化用户体验和制定营销策略。本文将深入探讨两种常见的前端埋点技术：命令式埋点和声明式埋点，并结合Vue的自定义指令和路由拦截...
【JavaScript源代码】vue-element-admin项目导入和导出的实现.docx
12-30
本篇文章将探讨如何在`vue-element-admin`项目中实现导入和导出功能，主要关注Excel文件的处理。 ### 1. Excel导入 对于Excel导入，通常我们会使用第三方库来解析Excel文件。`xlsx`是一个JavaScript库，用于读取、...
vue+element仿淘宝项目
06-17
以上就是“vue+element仿淘宝项目”的核心知识点，通过这个项目，开发者不仅可以深入理解Vue.js和Element UI的使用，还能学习到路由管理、状态管理、API接口对接以及前端工程化的实践。这个过程有助于提升前端开发的...
vue-element-admin 集成框架设置中文语言
11-10
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发，以其简洁的API和高效的性能深受开发者喜爱。Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件...
vue+element-ui的web前端开发脚手架项目
08-01
Vue.js和Element-UI是现代Web前端开发中的热门组合，它们为构建用户界面提供了强大的工具。Vue.js是一个轻量级的JavaScript框架，以其简洁的API和组件化开发模式深受开发者喜爱。而Element-UI则是一套基于Vue.js的高...
启动前端项目gmall-admin
Hiber12的博客
07-30 574
一、安装node和npm 1、安装node，相当于后端的jvm 链接: https://pan.baidu.com/s/14M5_dUBRZ8uCbTqLz7unQA 提取码: rmb6 2、用管理员身份打命令Node -v，查看安装结果，如果有显示版本号，即按照成功！ 3、再安装npm，输入命令：npm install即可。相当于后端的maven 运行命令之前，右键方框属性，把快速编辑模式点掉，不然有时候会直接把程序停到，无法正常运行命令。 二、配置前端项目并运行 1、解压前端项目（gmall-adm
IDEA启动VUE前端项目
热门推荐
东风麦芽糖
07-23 1万+
win10安装node.js idea配置node.js idea启动前端VUE项目 vue项目启动打包
前端项目启动步骤
qq_44181196的博客
08-01 6551
Vue项目部署步骤
启动前端项目（命令行）及错误处理
qq_56893454的博客
07-06 1763
我的解决办法：把项目拖入vs code中，看package.json中的配置，我的是vue3，所以是使用npm run serve，如果是vue2，可以试试npm run dev。3. 查看是否安装了vue脚手架（在项目路径下输入指令），查看vue脚手架版本：vue -V，没有就输入指令：npm install -g @vue/cli。如何查看是否安装了node，在命令行中输入：node -v。2.查看npm版本（安装node.js就会安装npm），在命令行中输入：npm -v。
Web前后端入门——项目启动
最新发布
T030606的博客
03-31 2090
通过老师给予的项目源代码，在自己的电脑上运行成功并启动。以下是本人在老师的教导下，在项目启动过程中的一些事件记录。这是一个前后端分开的一个项目，前端利用vue3框架，后端利用Spring Boot 3框架搭配maven工具，同时利用Redis存储临时数据来实现登陆界面实时验证码的效果。
搭建新项目 前端环境 及启动项目前的相关配置
YHLSunshine的博客
05-19 2806
搭建新项目 前端环境 及启动项目前的相关配置
Vue——引入Vue的方法、VM对象和基础指令（面试）
qq_52301431的博客
08-29 5238
v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等，插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名。//下载官方脚手架 到全局，集成webpack的环境，能生成webpack的这个软件就是脚手架 （cli一般指的是自动化）......
Vue笔记——搭建脚手架，快速创建Vue项目
weixin_52250664的博客
07-22 2259
一、安装Vue 二、安装vue-cli 三、Vue项目的创建 四、利用 WebStorm 开发 Vue
详解vue实现文件导入导出（前端部分）
weixin_46019681的博客
07-07 6432
首先，后端要先提供文件上传的接口 importData、文件导出的接口 exportData。因为你要导出的文件应该是数据库存在的（页面中的），所以呢，具体的导出就交给后端去实现，我们前端只要直接调用那个接口，不需要写axios： 其中，里的href要改成你自己后端提供的接口连接。用户点击导出，即交后端去执行。导入麻烦一点，需要设置一个弹窗，用户点击导入，弹窗出现，在该弹窗中，用户点击文件上传，然后选择文件。首先，我们写一个导入按钮， 然后给他添加点击事件importDa...
vue+element-ui纯前端项目
07-27
总结起来，Vue + ElementUI是一个用于构建后台管理系统的前端项目，它结合了Vue框架和ElementUI组件库。你可以通过安装ElementUI并在项目中使用它的组件来构建出美观、易用的后台管理界面。在渲染组件方面，你可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值