vue-loader

how to import functions from different js file in a Vue+webpack+vue-loader project

由 为君一笑 提交于 2019-12-03 06:21:00
问题 (see end for why this is not a dupe of How do I include a JavaScript file in another JavaScript file?) Javascipt + Vue + webpack + vue-loader noob... stumbling on the simplest of things! I have App.vue which has a template: <template> <div id="app"> <login v-if="isTokenAvailable()"></login> </div> </template> I declare the isTokenAvailable method in the normal way for Vue inside methods . It uses a function that I wrote in a separate js file: <script> import * as mylib from './mylib'; export

How to write test that mocks the $route object in vue components

由 ℡╲_俬逩灬. 提交于 2019-12-03 05:41:49
问题 I have a component that contains statement like this.$route.fullPath , how should I mock value of fullPath of $route object if I want to test that component? 回答1: Best not mock vue-router but rather use it to render the component, that way you get a proper working router. Example: import Vue from 'vue' import VueRouter from 'vue-router' import totest from 'src/components/totest' describe('totest.vue', () => { it('should totest renders stuff', done => { Vue.use(VueRouter) const router = new

webpack4下url-loader打包图片问题

由 匿名 (未验证) 提交于 2019-12-02 23:52:01
webpack.condig.js: const path = require('path'); //导入插件 const VueLoaderPlugin = require('vue-loader/lib/plugin');//加这句是为了避免报错：Module Error (from ./node_modules/vue-loader/lib/index.js): const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports={ entry:{ main:'./main' }, output:{ path:path.join(__dirname,'./dist'), publicPath:'/dist/', filename:'main.js' }, module:{ rules:[ { test:/\.vue$/, loader:'vue-loader', options:{ loaders:{ css:MiniCssExtractPlugin.loader } } }, { test:/\.js$/, loader:'babel-loader', exclude:/node_modules/ }, { test: /\.css$/, use:

how to import functions from different js file in a Vue+webpack+vue-loader project

由 故事扮演 提交于 2019-12-02 21:08:51
(see end for why this is not a dupe of How do I include a JavaScript file in another JavaScript file? ) Javascipt + Vue + webpack + vue-loader noob... stumbling on the simplest of things! I have App.vue which has a template: <template> <div id="app"> <login v-if="isTokenAvailable()"></login> </div> </template> I declare the isTokenAvailable method in the normal way for Vue inside methods . It uses a function that I wrote in a separate js file: <script> import * as mylib from './mylib'; export default { .... methods:{ isTokenAvailable: () => { return mylib.myfunc(); } } } </script> mylib starts

How to write test that mocks the $route object in vue components

由 给你一囗甜甜゛ 提交于 2019-12-02 18:07:27
I have a component that contains statement like this.$route.fullPath , how should I mock value of fullPath of $route object if I want to test that component? Best not mock vue-router but rather use it to render the component, that way you get a proper working router. Example: import Vue from 'vue' import VueRouter from 'vue-router' import totest from 'src/components/totest' describe('totest.vue', () => { it('should totest renders stuff', done => { Vue.use(VueRouter) const router = new VueRouter({routes: [ {path: '/totest/:id', name: 'totest', component: totest}, {path: '/wherever', name:

Vue-loader

由 纵饮孤独 提交于 2019-12-01 19:43:21
1.安装 npm install -D vue-loader vue-template-compiler 2.配置webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... other rules { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // make sure to include the plugin! new VueLoaderPlugin() ] } 3.main.js文件 import Vue from 'vue' import App from './App.vue' var vm = new Vue({ el: '#app', render:f=>f(App), // template:'<App/>', // components:{ // App // } }) 来源： https://www.cnblogs.com/zhaodz/p/11715157.html

webpack整合 .vue 文件,集成 vue-loader

由 我与影子孤独终老i 提交于 2019-12-01 12:14:22
webpack集成 vue-loader 创建一个文件夹 test_webpack_vue 在 test_webpack_vue 下新建目录 src 在 src 目录下 新建文件 index.html ,内容为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> 在src下 新建文件 main.js 内容为 console.log("test"); 在 test_webpack_vue 目录下,新建文件 .babelrc 内容为 { "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] } 在 test_webpack_vue 目录下,新建文件 package.json 内容为 { "name": "test-vue-webpack", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port

一步步创建第一个Vue项目

由 你。 提交于 2019-12-01 12:13:47
写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在 vue-cms 目录下创建文件 package.json 在 vue-cms 目录下创建文件 webpack.config.js 在 vue-cms 目录下创建文件 .babelrc 在 vue-cms 目录下创建目录 src 在 src 目录下创建文件 index.html 在 src 目录下创建文件 main.js package.json { "name": "vue-cms", "version": "1.0.0", "description": "这是我的第一个Vue项目", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 2198 --hot" }, "keywords": [], "author": "陶攀峰", "license": "ISC", "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin

How can I get vue-loader to interpolate asset urls?

由 点点圈 提交于 2019-12-01 08:47:14
I have an image with a dynamic (interpolated) src attribute. <img src="./{{bar}}.jpg"/> How do I get vue-loader to interpolate {{bar}} ? Pantelis Peslis I'm pretty sure that your code throws a warning (not referred it): [Vue warn]: src="./{{bar}}.jpg": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead. So, you should bind the value: <img :src="'/assets/' + bar + '.jpg'"> The above example it loads an image xxx.jpg from the static directory assets , but not via loader yet. To accomplish that, you should use a dynamic require : <img :src="loadImage(name)"> methods
订阅 vue-loader