#html直接引用vue和element-ui的方法

这篇具有很好参考价值的文章主要介绍了#html直接引用vue和element-ui的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

html直接引用vue和element-ui的方法

可以在官网下载vue和element-ui到本地,直接引入。也可以用npm下载依赖后,将指定的文件保存到HTML项目的js文件夹中,以下为引用方法:文章来源地址https://www.toymoban.com/news/detail-520704.html

1.引入vue
// 依赖包中的vue.js的路径 --》 node_modules--》 vue--》 dist--》 vue.js
<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
2.引入element-ui
(1).js
// 依赖包中的element-ui.js的路径 --》 node_modules--》 element-ui--》 lib--》 index.js
<script src="node_modules/element-ui/lib/index.js"></script>
(2).css
// 依赖包中的element-ui.css的路径 --》 node_modules--》 element-ui--》 lib--》 theme-chalk --》 index.css
<link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
(3).icon图标
依赖包中的element-ui图标的路径
 --》 node_modules--》 element-ui--》 lib--》 theme-chalk --》 fonts
直接将fonts文件夹放到css文件夹中。
3.使用
let vm =  new Vue({
  el:'#app'
  data: {
       msg:'111',
  },
  components:{
       App
  },
 //定义函数
 methods:{
 },
 //监听
 watch:{
  	msg:function(newV,oldV) {
  	}
 },
})
//暴露出vm下的属性和方法
console.log(vm)
//调用vm对象的属性和方法时需添加$,而data里的数据不用
console.log(vm.$el)
console.log(vm.$data)
console.log(vm.msg)  

到了这里,关于#html直接引用vue和element-ui的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【VUE】4、VUE项目中引入Element-UI

    1、element-ui 官方文档(中文版) 2、安装 element-ui 1、进入项目目录下 2、安装 element-ui 注意: VUE2 使用的是 element-ui,VUE3 使用的是 element-plus 3、引入 element-ui(完整引入) 1、打开 main.js 文件 在 main.js 文件中,引入 element-ui 2、注册 element-ui 以上代码便完成了 Element 的引入。需

    2024年02月01日
    浏览(40)
  • 【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例

    element-ui 提供了大量的组件,如:布局组件、表单组件、JS组件等等。 Element-ui官网: https://element.eleme.cn/#/zh-CN 安装 Element-ui: npm i element-ui -S 1.1.1 引入组件 引入 Element 完整引入(在 main.js 中写入以下内容): 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到

    2024年02月07日
    浏览(41)
  • Vue2 - 引入Element-UI组件样式

    官方文档 https://element.eleme.cn/#/zh-CN/component/installation 推荐使用 npm 的方式安装 ,它能更好地和 webpack 打包工具配合使用。 在终端cd到项目文件夹下安装 也可以通过CDN(不推荐) 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    2024年02月06日
    浏览(50)
  • vue项目引入element-ui的三种方式

    通过执行命令vue add element来进行引入 通过执行命令npm i element-ui -S安装依赖 main.js文件引入element-ui main.js文件全局引入element-ui样式 安装babel-plugin-component 修改babel.config.js文件 main.js按需引入组件

    2024年02月11日
    浏览(39)
  • vue3中按需引入element-ui并配置

    element-ui官网地址:element-ui官网-vue3 npm安装 如果对打包后的文件大小不是很在乎,那么使用完整导入会更方便,这里推荐使用按需引入。 按需引入具体步骤: 首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。 配置vue.config.js文件 main.js文件配置 如果需要使用el

    2024年02月12日
    浏览(34)
  • 搭建vue3项目+按需引入element-ui框架组件

    场景 :使用vue create脚手架快速搭建vue的项目 前提 :需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 查看安装的版本(显示版本号说明安装成功) 1.cmd窗口跳到需要新建项目的文件夹下,使用vue create 2.我这里选择第三个Ma

    2024年02月16日
    浏览(50)
  • .html文件中引入element ui 的方法

    把主要文件下载下来vue.js,element.js,element.css下载下来(点击vue.js,粘贴复制即可,其他的一样) 我们也要把这两个字体样式拿下来,地址是: element-icons.woff element-icons.ttf 目录结构 代码中引入 提示: 这三个文件的顺序很重要 效果图 备注: 来源于https://blog.csdn.net/bingot/artic

    2024年02月11日
    浏览(28)
  • vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

    因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快  (能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过)  在执行下面操作之前,你要确定你的阿里云能看到上边这个页面   这里主

    2024年02月10日
    浏览(45)
  • vue2创建项目的两种方式,配置路由vue-router,引入element-ui

    提示:vue2依赖node版本8.0以上 使用@vue/cli脚手架vue create创建 使用vue-cli脚手架vue init webpack创建 1、查看nodejs版本 2、全局安装vue脚手架和webpack脚手架 3、新建vue2项目 创建选项除了,Install vue-router??选择是,其他选择的否 4、安装依赖并启动文件 5、预览 6、目录结构 1、如果安

    2024年04月14日
    浏览(33)
  • NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入

    1.下载过程默认下一步 (1)这个是官网全版目录,下载太慢(一般下载不了);但是它写了所有nodejs和npm相互对应的版本,可以以此为参考、防止版本不对应; NodeJS各个历史版本下载 https://nodejs.org/zh-cn/download/releases/ (2)这里有一个快速下载地址,只有16.18.1这个版本,但这

    2023年04月18日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包