全面解析vue-cli生成的项目中使用其他库(js库、css库)

前言:最近有小伙伴问我,是不是用vue脚手架生成的项目就不能jquery了呢?显然,答案是否定的,必须能用。但是个人建议最好不要用了,用人家vue提供的不好嘛。

一、用vue-cli生成项目

1. vue init webpack-simple vue-jq
2. cd vue-jq
3. cnpm install
4. 使用git bash(只是为了方便)
5. package.json 中修改端口  --port 8088
6. npm run dev

二、构建项目结构,引入相关文件

目录结构如下:

  |--assets
    |--js
       |--fn.js
       |--jquery-1.7.2.min.js
    |--css
       |--animate.css
       |--1.css

说明:fn.js为一个函数,里面返回了一个生成随机数的函数

export default {
  rnd:function(m,n){
    return parseInt(Math.random()*(m-n)+n)
  },
  b:5
};

1.css文件就设置了一个body的背景色

body{
    background:#399;
}

三、配置相关文件

1. 在入口文件main.js引入所需的库
import ‘./assets/css/animate.css‘;
import ‘./assets/css/1.css‘;
import ‘./assets/js/jquery-1.7.2.min.js‘;
2. 开始配置jquery库
           1). npm install jquery --save-dev
           2). 在webpack.base.conf.js中添加 配置
                     plugins: [
                        new webpack.ProvidePlugin({
                          $: ‘jquery‘,
                          jquery: ‘jquery‘,
                          ‘window.jQuery‘: ‘jquery‘,
                          jQuery: ‘jquery‘
                        }),
                      ],
           3). 在App.vue中引入模块
                import $ from ‘jquery‘
                import fn from ‘./assets/js/fn.js‘;
3. 开始配置animate.css库
        1). npm install style-loader --save-dev
        2). 在webpack.base.conf.js中添加 配置
                {
                    test: /\.css$/,
                    loader: ‘style-loader!css-loader‘ //顺序定死的,必须这么写,知道吗?
                  },
4. 添加事件修改dom

说明:
1. 点击“按钮”,利用jquery将class名为box的元素背景设为粉色
2. 点击“走你”,利用vue提供的方法获取元素并结合animate.css来实现动画效果,注意:这里调用了fn.js文件中生成随机数的函数。
ps:vue中获取元素,首先在该元素上加ref="xxx",然后在js中用this.$refs.xxx 来获取该元素进行后续操作

<template>
  <div id="app">
    <button type="button" name="button" @click="change">按钮</button>
    <button type="button" name="button" @click="move">走你</button>
    <h2>{{ msg }}</h2>
    <div class="box">
      <span>我是一个普通的div</span>
    </div>
    <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <div class="animated box" ref="div1" v-show="show">
          我能动起来
      </div>
    </transition>
  </div>
</template>
<script>
import $ from ‘jquery‘;//引入jq
import fn from ‘./assets/js/fn.js‘;//引入外部的fn.js文件
export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘Welcome to vue‘,
      show: true
    }
  },
  methods: {
    change(){
      this.msg = ‘div背景色变红了‘
      $(‘.box‘).css(‘background-color‘,‘pink‘);
    },
    move(){
      this.show = !this.show;//用来配合动画(animate)使用
      this.$refs.div1.style.backgroundColor = ‘lawngreen‘;
      //利用外部的fn.js中的rnd函数生成一个随机数
      let item =  $(‘.box:first span‘).html() + ‘;<br/>生成的随机数是:‘+  fn.rnd(1,100);
      $(‘.box:first span‘).html(item);
    }
  }
}
</script>

效果如下:

原文地址:https://www.cnblogs.com/glauto/p/8334887.html

时间: 2024-10-08 12:40:24

全面解析vue-cli生成的项目中使用其他库(js库、css库)的相关文章

vue cli 3 查看项目 vue.config.js 的默认配置信息

vue cli 3 查看项目 vue.config.js 的默认配置信息 运行命令,在终端输出: npx vue-cli-service inspect 运行命令,将输出导入到文件:vue.config.detail.js: npx vue-cli-service inspect >> vue.config.detail.js 在文件:vue.config.detail.js 开头,添加:module.exports =,然后格式化即可查看. 原文地址:https://www.cnblogs.

Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载的问题

首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行查看 双击Tomcat服务,会打开一个窗口,然后点击Open launch configuration,可打开配置窗口,在这里可以查看到具体服务所在位置. 接下来步入正题,正如题目所说,Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载,如图 仔细看下路径,会

Web 开发中 20 个很有用的 CSS 库

转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.我们

[工具篇]eclipse 中设置 Java/JSP/JS/HTML/CSS 智能提示

Visual Studio 2010 中的智能提示很好用,在eclipse中是否也可以通过设置使得java代码文件.jsp文件.html文件.css文件.js文件时也能有这样方便的智能提示呢?应该是有的: 1.设置java代码智能提示 1)打开eclipse→Windows→Preferences→Java→Editor→Content Assist 2)修改Auto Activation triggers for java的值为:zjava   点击apply按钮.(zjava主要是用在后面替

ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用此文件路径会是 1 <link type="text/css" rel="stylesheet" href="navigator/css/shou.css" /> 2 <script type="text/javascri

vue-cli+webpack在生成的项目中使用bootstrap

在也个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vuestrap 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意). ? Project name

C++\CLI语法 在项目中的使用

通常情况下,对一个标准的com组件进行集成,网上普遍使用的方式有: 1.#import *.dll 或 #import *.ocx的方式,VS编译器重新编译后,就会自动生成组件对应的*.tlh文件,该文件类似于头文件,含有com组件中的接口信息,在自己的项目中就可以引用接口或者类了.2.#pragma comment(lib, "*.lib")的方式,这种方式可以直接引用lib里的接口声明. 好巧不巧:项目中碰到的三方组件恰好用这两种方式都不能集成:用第一种方式,VS生成的tlh文件内

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

【vue】vue-cli3构建项目中实现图片懒加载

前两天正好写了文章如何用实现图片懒加载[性能优化]JS实现图片懒加载,今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要,本想把前两天的代码直接copy过来的,后来想查查看有没有更简便的方法,果不其然,vue中直接有插件可以使用,看了下实现时候的效果,实现原理都和原生js是一样的,vue果然真香! 接下来我们来讲vue-lazyload插件的使用: 1.安装插件 cnpm i vue-lazyload -S 2.入口文件main.js中配置: import Vue from 'vue