精华内容
下载资源
问答
  • Vue-js-modal使用

    千次阅读 2019-10-06 19:50:03
    npm install vue-js-modal --save Include plugin in yourmain.jsfile import VModal from 'vue-js-modal' Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickTo...

    安装:

    npm install vue-js-modal --save

    Include plugin in your main.js file

    import VModal from 'vue-js-modal'
    
    Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });

    main.js

    import Vue from 'vue';
    import router from './router'
    import App from './App.vue';
    import store from './store'
    // 导入 table 和 分页组件
    import { VTable, VPagination } from 'vue-easytable'
    //vue-js-modal
    import VModal from 'vue-js-modal'
    
    // 注册到全局
    Vue.component(VTable.name, VTable);
    Vue.component(VPagination.name, VPagination);
    
    //vue-js-modal
    Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });
    
    Vue.config.productionTip = true;
    
    Vue.filter('capitalize', function(value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    });
    
    
    new Vue({
        router: router,
        store,
        render: h => h(App)
    }).$mount('#app');

    Home.vue

    <template>
      <div>
            <SignedInUser />
        <router-link :to="{name:'welcome'}">to welcome</router-link><br/>
        <router-link :to="{name:'table'}">to vuetable-2</router-link><br/>
        <button v-on:click="showModal">showModal</button>
      
        <br/>
        <div>
          Name:<input type="text" v-model="product.name">
          <div>
            <span>{{product.name | capitalize}}</span>
          </div>
        </div>
        <div>
          Leves:<label>高</label> <input type="checkbox"  value="H" v-model="product.leves"/>
          <label>中</label> <input type="checkbox"  value="M" v-model="product.leves"/>
          <label>低</label> <input type="checkbox"  value="L" v-model="product.leves"/>
        </div>
        <div>
          <button v-on:click="show">show</button>  <br/> 
          <button v-on:click="request">requestApi</button>
        </div>
        <h1>Lazy</h1>
        <div>
          <div><input type="text" v-model="product.price" lazy debounce="5000"></div>
          <div>showPrice:{{product.price}}</div>
          <div>ComputedResult:{{total}}</div>
        </div>
    
        <ul v-for="(item, index) in product.leves " :key="index">
          <li >{{index}}{{item}}</li>
        </ul>
      </div>
    
    </template>
    
    <script>
        import SignedInUser from './SignedInUser.vue'
        import axios from '../config/axios.js'
        import ModalDemo from './ModalDemo.vue'
    
        export default {
            name: 'Home',
            components: {
                SignedInUser
            },
            data() {
                return {
                    product: {
                        name: "xiaomi",
                        leves: ["M", "L"],
                        price: 100
                    }
                }
            },
            methods: {
                show: function() {
                    alert(JSON.stringify(this.product));
                },
                showModal() {
                    this.$modal.show(ModalDemo, {
                        text: 'This text is passed as a property'
                    }, {
                        draggable: true,
                        clickToClose: false
                    })
                },
                request: function() {
                    axios.get('/values')
                        .then(function(response) {
                            console.info(response);
                        })
                        .catch(function(error) {
                            console.debug(error);
                        });
    
    
                    axios.post('/values', JSON.stringify({
                            name: "hiword"
                        }))
                        .then(function(response) {
                            console.info(response);
                        })
                        .catch(function(error) {
                            console.debug(error);
                        });
    
                    axios.put('/values/123', JSON.stringify({
                            name: "hiword"
                        }))
                        .then(function(response) {
                            console.info(response);
                        })
                        .catch(function(error) {
                            console.debug(error);
                        });
    
                    axios.delete('/values/123')
                        .then(function(response) {
                            console.info(response);
                        })
                        .catch(function(error) {
                            console.debug(error);
                        });
                }
            },
            computed: {
                total: function() {
                    return this.product.price * 0.283;
                }
            }
        };
    </script>
    
    <style scoped>
    
    </style>

    ModalDemo.vue

    <template>
         <div>
          Close using this button: 
         <button v-on:click="$emit('close')">Close</button>
          </div>
    </template>
    <script>
        export default {
    
        }
    </script>
    
    <style scoped>
    
    </style>

    运行效果:

    参考文献:

    https://www.npmjs.com/package/vue-js-modal 

    展开全文
  • vue-js-modal 模态弹出窗口

    千次阅读 2019-04-12 17:47:32
    基于Vue实现的Modal窗口,单独组件,方便使用,还很美观 更多精彩 更多技术博客,请移步 IT人才终生实训与...使用终端在项目根目录运行以下脚本后,package.json 的 dependencies 中会出现 vue-js-modal: ^x...

    基于Vue实现的Modal窗口,单独组件,方便使用,还很美观

    更多精彩

    相关网址

    1. vue-js-modal github
    2. vue-js-modal example

    使用方式

    安装依赖

    1. 使用终端在项目根目录运行以下脚本后,package.jsondependencies 中会出现 vue-js-modal: ^x.x.xx 的依赖
    npm i -D vue-js-modal
    

    全局注册插件

    1. main.js 中引入插件并注册到Vue全局实例中
    2. 建议直接在配置中打开 dialog 以及 dynamic 的窗口模式,因为这两种模式默认是关闭的
    import VModal from 'vue-js-modal'
    
    Vue.use(VModal, {
      dialog: true,
      dynamic: true
    })
    

    编写插件

    1. 因为插件被全局注册,所以可以直接通过 <modal> 标签引用插件
    2. 通常会指定窗口的名称,因为后续是通过名称调用窗口
    <template>
      <modal name="as-modal">
        这里显示窗口内容
      </modal>
    </template>
    

    调用插件

    1. 使用 import 引入编写好的插件模块,同时注册到 components
    2. <template> 中实例化组件,组件如果有提供对外参数,此时也可以传入
    3. 使用 this.$modal.show('as-modal') 打开窗口,这里的 as-modal 就是之前编写插件时为 <modal> 指定的名称
    <template>
      <div id="organizationPanel" class="body">
        <div class="organization-item new" @click="openModal"></div>
        <as-modal/>
      </div>
    </template>
    
    <script>
      import asModal from 'components/as-modal'
    
      export default {
        name: 'organization',
        methods: {
          openModal () {
            this.$modal.show('as-modal')
          }
        },
        components: {
          asModal
        }
      }
    </script>
    

    部分API的使用和注意点

    属性

    1. name 指定窗口名称
      • 显示窗口时将名称传入 this.$modal.show(name) 函数即可
    2. classes 指定窗口className
      • 注意不是 class
      • 查看源码得知本属性支持传入 StringArray ,默认值是 v--modal
      • 所以如果传入自定义className ,属于默认值的 v--modal 就不会被指定,也就导致默认的样式无法生效
      • 建议在传入自定义className时,同时指定默认值,例如 as-modal v--modal ,这样自定义和默认值都会生效
    3. transition 窗口弹出的过渡效果
      • 没有默认值,但原生提供了 nice-modal-fade 效果,可以直接显示指定
      • 想要其他效果需要自定义编写,命名和使用规则参照Vue过渡效果
    4. overlayTransition 遮罩层过渡效果
      • 默认值 overlay-fade
      • 其他效果需要自定义编写,命名和使用规则参照Vue过渡效果
    展开全文
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...

           Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

           下面介绍三种 Vue.js 的安装方法:

            1.独立版本

           我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。->  <script src = ../vue.js> </script>  开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用)

    使用vue多页面开发:

    1. 引入vue.js
    2. 创建一个vue根实例  new Vue({选项})

            2.使用CDN方法

         3.NPM方法(推荐使用)

          在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

         首先,先列出我们接下来需要的东西:

    • node.js环境(npm包管理器)
    • vue-cli 脚手架构建工具
    • cnpm npm的淘宝镜像      

           1) 安装node.js

                从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入

            node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

                  

                 npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。

                  

            到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.

         2) 安装cnpm

               在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:

                

           完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

     

          3) 安装vue-cli2 脚手架构建工具(必须在全局中进行安装)

               在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

               是否安装成功:vue -V

                通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

     

            首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:

             

    在NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp(初始化一个完整版的项目) 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeTest 目录生成该文件夹),如下图:

    若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中:vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包:

    是否是在本目录下进行创建

            

    输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

    • Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
    • Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
    • Author:作者,如果你有配置git的作者,他会读取。
    • Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
    • Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
    • setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
    • Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n

        运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:

         

     接下来,我们去NoteTest目录下去看是否已创建文件:

          

      打开firstApp 项目,项目中的目录如下:

          

        介绍一下目录及其作用:

         build:最终发布的代码的存放位置。

         config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

         node_modules:npm 加载的项目所需要的各种依赖模块。

         src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

                 assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名),如logo等

                 components:目录里放的是一个个的组件文件

                 router/index.js:配置路由的地方

                 App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。

                 main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。

         static:静态资源目录(会原分不动的对文件进行处理),如图片、字体等。

         test:初始测试目录,可删除

          .XXXX文件:配置文件。

         index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

         package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。(大概版本)

         package-lock.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。(具体版本)

         README.md:项目的说明文件。

         webpack.config.js:webpack的配置文件,例:把.vue的文件打包成浏览器能读懂的文件。

         .babelrc:是检测es6语法的配置文件,例:适配哪些浏览器的限制

         .gitignore:上传到服务器忽略哪些文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)

         .postcssrc.js:前缀的配置 (css转化的配置)

         .editorconfig:对代码进行规范,例:root是否进行检测,代码尾部是否换行,缩行前面几个空格...(建议定义这个规范)

         .eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)

         .eslintignore:忽略eslint对项目某些文件的语法规则的检查

     

        这就是整个项目的目录结构,其中,我们主要在src目录中做修改(模块化开发)。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。

        cd  项目名;进入项目中

        安装项目所需要的依赖包/插件(在package.json可查看):执行 cnpm install   (npm可能会有警告,这里可以用cnpm代替npm了,运行别人的代码需要先安装依赖)如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

    若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件,然后npm run dev 运行项目

        

        安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。

        

     安装完依赖包资源后,我们就可以运行整个项目了。

        

       运行项目

        在项目目录中,运行命令 npm run dev (npm run start),会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

        

        项目启动后,在浏览器中输入项目启动后的地址:

      

        在浏览器中会出现vue的logo:

         

    至此,vue的三种安装方式已介绍完毕。

     

    项目完成后输入打包命令:cnpm run build;会生成一个dist文件,就是我们的打包文件,点击.html文件能运行则成功。

    一、搭建vue的开发环境(大纲)

    1. 必须安装node.js
    2. 搭建vue的开发环境,安装vue的脚手架工具    官方命令行工具

    npm install - -global vue-cli

         3.创建项目   必须cd到对应的一个项目里面

    vue init webpack vue-demo01

    cd  vue-demo01

    cnpm install   /  npm install          如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install 

    npm run dev/npm run start

         4.另一种创建项目的方式中小型项目   (推荐)  ***

    vue init webpack-simple vuedemo02

    cd  vuedemo02       

    cnpm install   /  npm install           

    npm run dev

     

    拿到别人的项目不能正常运行后看有没有node_modules这个文件(项目所有的依赖),若没有cd到项目中安装项目的依赖:cnpm install/npm install

     

    二、升级:vue-cli3.0

    一、使用vue-cli3.0

    1. Vue CLI的包名称由vue-cli改成了@vue/cli
    2. 如果你已经全局安装了旧版本的vue-cli(3.0以下),你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
    3. Node.js8.9+
    4. 安装vue-cli3.0     npm install -g @vue/cli  或者 yarn global add @vue/cli
    5. 版本是否是3.x    vue --version/vue -V
    • 通过vue-cli创建项目
    1. 创建项目命令

    vue create 项目名;   项目名不建议存在大写,中间用-隔开

    这时候需要注意创建项目需要预先安装的插件:

    默认的会有Babel + ESLint;但是不建议默认,选择下面:

    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
    ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
    ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
    ( ) Router // vue-router(vue路由)
    ( ) Vuex // vuex(vue的状态管理模式)
    ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
    ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
    ( ) Unit Testing // 单元测试(unit tests)
    ( ) E2E Testing // e2e(end to end) 测试 

    等待项目初始化完成。。。。。。

    1.cd 到项目里

    2.npm run serve   运行项目

     

    或者使用图形化界面创建项目:

    vue ui

    registerServiceWorker.js:这个就是service workers的配置文件,可以对sw的各个生命周期进修改。(这个一般用的少)

    自定义配置文件:vue.config.js(固定)

    创建好项目后会发现找不到webpack.config.js配置文件,这是vue-cli3不想让我们随意看到配置文件隐藏起来了,可以通过在根目录下创建一个vue.config.js(名字固定)来添加我们的配置(在运行时会自动添加到webpack.config.js文件上)

    vue.config.js配置项

    三、vue-cli3中拉取vue-cli2

    拉取 2.x 模板 (旧版本)

    Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具

    npm install -g @vue/cli-init
    # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
    vue init webpack my-project

    https://cli.vuejs.org/zh/guide/creating-a-project.html

    runtime+compiler和runtime-only的区别:在main.js文件中

      /**
       *等价于
      render: function(h) {
        return h(App);
      }
        等价于
      render: function(createElement) {
        return createElement('h2');
      }
      */

        1.如果在开发中使用的是template,就需要选runtime-compiler
        2.如果在开发中使用的是.vue文件夹,就需要选runtime-only(比上面那种模式轻大约 6KB,但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数;.vue 文件中的template也是被 vue-template-compiler 翻译成了render函数,所以只能在.vue里写 template)
        3.runtime-compiler的vue程序运行过程:
              template---------------->ast------------->render---------------->vdom------------------>UI
               (模板)    解析   (抽象语法树)  编译  (render函数)  形成  (虚拟DOM)  转成   (真实DOM)
        4.runtime-only的vue程序运行过程:
              render------------------->vdom-------------->UI
            (render函数)  形成  (虚拟DOM)  转成   (真实DOM)
        5.runtime-only的性能更高、代码量更少

     

     

     

     

    看了那么多的vue.js的安装方式总结一下。如有不多请多多指教!希望给您带来帮助!

    参考文献:https://blog.csdn.net/m0_37479246/article/details/78836686

    展开全文
  • Vue build 打包和部分vue-config-js配置

    千次阅读 2020-05-28 14:54:41
    vue 打包 当我们使用vue写好项目后我们需要将项目进行打包成html项目,使用一下命令可以打包项目。 npm run build ... -- dist -- css -- js -- img ...vue-config-js配置 在vue项目里创建vue.con

    vue 打包

    当我们使用vue写好项目后我们需要将项目进行打包成html项目,使用一下命令可以打包项目。

    npm run build

    在当前目录下输入打包命令,等待打包完成后在根目录生成一个dist的文件夹,里面是html页面和css,js,img文件夹。

     -- dist
     	-- css
     	-- js
     	-- img
     	-- index.html
    

    当然这个html项目我们无法通过双击的形式打开,我们需要创建一个服务才能运行此项目。

    vue-config-js配置

    vue项目里创建vue.config.js的文件,我们可以在里面配置项目,在打包的时候会按照配置的内容进行打包。

    // vue.config.js
    
    module.exports = {
    	// ...body
    }
    
    productionSourceMap 是否包含map映射文件

    默认为true,设置为false后就不会存在map映射文件;用于追踪线上错误信息,没什么太大的作用,因为项目有问题是不会上线。

    const path = require("path");
    module.exports = {
        productionSourceMap: false
    }
    
    outputDir 输出的文件夹名称

    默认输出文件夹为dist,我们也可以去修改他。

    // vue.config.js
    
    module.exports = {
    	outputDir: './myDist'
    }
    
    assetsDir 设置静态资源在同一个文件夹
    // vue.config.js
    
    module.exports = {
    	assetsDir: 'assets'
    }
    

    cssjsimg文件夹放在同一个文件夹中,目录结构如下

     -- dist
     	-- assets
    	 	-- css
    	 	-- js
    	 	-- img
     	-- index.html
    
    devServer 设置代理

    在实际开发过程中,前后端分离必定会存在跨域,设置代理解决这个问题。

    // vue.config.js
    
    module.exports = {
    	devServer: {
    		proxy: {
    			// 为单个请求设置代理
    			"/getData" : {
    				target : "http://localhost:3000"
    			}
    		}
    	}
    }
    
    // vue.config.js
    
    module.exports = {
    	devServer: {
    		// 统一设置代理
    		proxy:  "http://localhost:3000"
    	}
    }
    

    当然打包还有很多的配置,在网上也会有很多配置vue-config-js的博客,有兴趣可以搜索前往阅读。

    展开全文
  • 问题描述 To install them, you can run: npm install --save vue-upload-component vue-upload-component/dist/vue-upload-component.part.css 解决 npm install core-js@2
  • 引入vue-resource<script src="js/vue.js"> <script src="js/vue-resource.js">基本语法 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。// 基于全局Vue对象使用http Vue....
  • vue--js实现倒计时

    千次阅读 2018-09-17 17:37:13
    data(){ return{ isEnd:false,//倒计时是否结束 endTime:'2018-10-29 08:00:00',//应为接口获取到的结束时间 } }, created(){ let that = this; that.setEndTime(); }, methods:{ ......
  • Vue入门 ---- vue-loader 、vue-cli

    千次阅读 2018-04-08 12:44:27
    简介: vue-loader,来源于css-rouder、url-loader、html-loader… 后台node.js–&gt;require exports等都是基于模块的开发 broserify 较早的模块...vue-loader是基于webpack的 .vue文件 由vue-loader构成...
  • 瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果,该布局随着页面滚动,数据不断加载并附加至当前页面的...一、vue-waterfall waterfall是一个vue.js瀑布流布局组...
  • 报错: This dependency was not found: core-js/modules/es.object.to-string in ./src/...最新的 vue-cli 3.x的版本,core-js是3.x的版本,而这个版本中,对那些polly补丁包进行了整理 ,这其实是一个版本缺失 c
  • 在终端,输入 cnpm i vue-loader vue-template-compiler -D 安装vue-loader vue-template-compiler 输入npm run dev之后出现 查看了很多网上解决的方法,因为vue-loader是 15之后的版本,需要安装一个叫做 ...
  • 使用npm全局安装vue-cli: npm install -g @vue/cli 可以使用如下的创建项目的命令,查看vue cli的安装情况: 按照上面的提示,先卸载之前的版本,然后安装新的版本。 安装成功后,如果要查看安装的cli的...
  • 1.请求数据的模块vue-resource ... vue-resource 是官方提供的vue的一个插件 axios fetch-json 2.模块初始化 npm install vue-resource --save 3.基本语法 // 传统写法 this.$http.get('/...
  • 前端效果: 1.首先要安装vue-video-player 包 npm install vue-video-player --save 2.在 main.js 中进行配置 ...import VueVideoPlayer from '...import 'video.js/dist/video-js.css' import 'vue-video-playe...
  • Vue-Element-Admins是前端成熟框架,基于vue+element ui的开源技术方案:vue-element-admin 码云地址,教程:vue-element-admin教程,界面简洁清爽; 本地安装node.js和git工具,copy到本地即可运行,框架默认...
  • 问题描述:在之前的项目开发中,遇到了这个异常, vue-router.esm.js?8c4f:2079 Error: Cannot find module '../../../vue-temp/vue-editor-bridge' 解决办法:找不到模块,说明缺少对应的模块, Cannot find ...
  • Vue 中 使用 vue-cookies和vue-session

    万次阅读 2019-05-17 10:33:18
    一、Vue中使用vue-session 1.npm 安装 vue-session npm install vue-session 2.在main.js中引入 import VueSession from 'vue-session' Vue.use(VueSession) 3.使用 this.$session.set("key",value); //存...
  • Vue -- 在vue中使用vue-echarts-v3

    千次阅读 2018-08-11 00:13:07
    特征 轻量,高效,按需绑定事件 支持按需导入ECharts.js图表​​和组件 支持组件调整大小事件自动...用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件 1、webpack 1.x 修改成如下 ...
  • vue-使用js创建组件--render函数

    千次阅读 多人点赞 2020-07-10 16:56:01
    vue-cli--使用js创建组件--render函数template 怎么被写成一个页面的一般使用组件我们也可以使用JS创建一个组件 template 怎么被写成一个页面的 template 被 vue-template-compiler 插件编译成一个render函数 ...
  • 1. 安装 vue-cli3.0 ,可以使用下列任一命令安装这个新的包: 2.打开终端,创建一个项目 3. 配置 自己选择 4. 项目构建完成 启动项目 4.1启动成功 4.2运行报错 无报错 忽略 5.安装axios 6. 配置 vue.config....
  • 浅谈vue-resource和vue-axios的区别

    千次阅读 2019-01-16 10:49:59
    vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,jquery的 $.ajax 能做的事情,vue-resource一样也能做到,而且vue-resource的API更为简洁。另外,vue-reso...
  • vue-cli3使用vue-progressbar

    千次阅读 2018-11-02 23:58:43
    安装vue-progressbar yarn add vue-progressbar --save 或者 npm i vue-progressbar --save 在main.js中引入 import VueProgressBar from 'vue-progressbar' Vue.use(VueProgressBar, { color: '#1890ff', // ...
  • vue-chartjs 图表库配置及使用

    千次阅读 2019-08-11 18:35:16
    官网 官方文档 使用Chart.js和Vue.js简单漂亮的...vue-chartjs 是基于 Chart.js 实现的 vue 版本 npm npm install vue-chartjs chart.js --save 组件 Bar HorizontalBar Doughnut Line Pie PolarArea Radar Bubbl...
  • vue.js+vue-awesome-swiper轮播

    千次阅读 2017-03-17 14:09:13
    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似。1.安装vie-awesome-swipernam install vue-awesome-swiper --save-dev2.引用vie-awesome-...
  • 1.安装vue-highlightjs和highlight.js npm install --save vue-highlightjs npm install --save highlight.js 2.main.js中引入并开启使用highlight import VueHighlightJS from 'vue-highlightjs' import '...
  • vue-chartjs 图表库

    千次阅读 2018-10-18 11:40:25
    vue-chartjs 是基于 Chart.js 实现的 vue 版本 更多精彩 更多技术博客,请移步 asing1elife’s blog 官网 vue-chartjs vue-chartjs-docs 需要写在前面的注意点 不同图表该使用什么名称进行引用 ...
  • vue-config.js配置实战

    万次阅读 2018-11-15 15:04:00
    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢?...
  • "core-js": "^3.6.5", "swiper": "^6.0.4", "vue": "^2.6.11", "vue-awesome-swiper": "^4.1.1", "vue-router": "^3.2.0" }, 官方说明了安装6.0版本的话需要引入另外一个css // If you use
  • * ../../vue-temp/vue-editor-bridge报错-爬坑

    千次阅读 2020-12-03 08:14:28
    * ../../vue-temp/vue-editor-bridge in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib...
  • 首先Vue的安装依赖于Node.js,要保证你的计算机上已经安装过Node.js。可以参考前面的文章:https://blog.csdn.net/GJYSK/article/details/108210708 如何查看Node是否安装或者Node版本呢? 进入cmd,输入命令:node ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 103,823
精华内容 41,529
关键字:

vue-js

vue 订阅