vue-loader | 易学教程

Accessing props in vue component data function

阅读更多关于 Accessing props in vue component data function

问题 I am passing a props to a component: <template> {{messageId}} // other html code </template> <script> export default { props: ['messageId'], data: function(){ var theData={ // below line gives ReferenceError messageId is not defined somevar: messageId, // other object attributes } } } </script> In above code, I have commented the line that gives the error. If I remove that line, it works as normal and template renders properly (and I can see the expected value of {{messageId}} as well). Hence

webpack构建vue项目（配置篇）

阅读更多关于 webpack构建vue项目（配置篇）

最近公司要求用vue重构项目，还涉及到模块化开发，于是乎，我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具，发现上手并不是很容易，现将总结的一些有关配置的心得分享出来，欢迎大神来拍砖。。。一、新建一个项目目录，cd /d 定位进去，然后输入npm init，会提示你填写一些项目的信息，一直回车默认就好了，或者直接执行npm init -y 直接跳过，这样就在项目目录下生成了一个package.json文件。二、接下来就是通过npm安装项目依赖项，命令行输入：npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev ，继续输入npm install vue@^1.0.26 --save 。这里注意的几个点如下： 1.需要安装的依赖项视具体的项目需求来定，我只是安了几个必需的，后期会再加； 2.输入之后如果一直报错或者光标一直在转动

node-sass 安装失败的各种坑

阅读更多关于 node-sass 安装失败的各种坑

开始的时候引入别人的一个项目 npm install npm run dev 启动项目报错 > node build/dev-server.js Listening at http://localhost:8888 webpack: wait until bundle finished: /index.html webpack built 5301489d16ee90d86896 in 3165ms Hash: 5301489d16ee90d86896 Version: webpack 1.15.0 Time: 3165ms Asset Size Chunks Chunk Names app.js 1.96 MB 0 app ERROR in Cannot find module 'node-sass' @ ./src/common/scss/index.scss 4:14-124 13:2-17:4 14:20-130 ERROR in Cannot find module 'node-sass' @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-e0c3a2e6!./~/sass-loader!./~/vue-loader/lib/selector.js

vue Syntax Error: Unexpected token {

阅读更多关于 vue Syntax Error: Unexpected token {

> music@1.0.0 dev F:\music\music > node build/dev-server.js > Starting dev server... ERROR Failed to compile with 2 errors14:30:11 error in ./src/App.vue Syntax Error: Unexpected token { @ ./src/main.js 4:0-24 @ multi ./build/dev-client ./src/main.js error in ./src/components/HelloWorld.vue Syntax Error: Unexpected token { @ ./src/router/index.js 3:0-49 @ ./src/main.js @ multi ./build/dev-client ./src/main.js > Listening at http://localhost:8080 安装"vue-loader": "11.1.4",可解决 npm uninstall --save-dev vue-loader //删除vue-loader npm install --save-dev vue-loader@11.1.4 //安装vue-loader 来源： https:/

运行vue工程遇到的问题

阅读更多关于运行vue工程遇到的问题

1.找不到babel-core模块按控制台里提示的，安装babel-core@7即可 npm install --save-dev babel-core@7 2.You may need an additional loader to handle the result of these loaders.(需要额外的加载器来处理这些加载器的结果)。这里老是不能按期待的显示，本来应该是id为app的div被替换成带data字段的div，样式也是，但是每次都看到Hello World.都无语了。最后我看了vue-loader文档，里面提到“你应该将 vue-loader 和 vue-template-compiler 一起安装”，所以， npm install -D vue-loader vue-template-compiler 并且配置了webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... 其它规则 { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ] }

laravel-mix configuration for vue-loader

阅读更多关于 laravel-mix configuration for vue-loader

问题 I was trying to create a css modules using vuejs. However, I cannot figure out how to configure the webpack. Here is my Vue component <template> <div> <div :class="$style.header_top"> </div> </div> </template> <style module lang="scss"> $black: #1e1e1e; $white: #fff; .header { position: absolute; width: 100%; &_top { background-color: $black; padding: 15px 0; } .... </style> This is my laravel-mix configuration: mix.webpackConfig({ module: { rules: [ { test: /\.css$/, resourceQuery: '/module/

webpack 安装vue-loader

阅读更多关于 webpack 安装vue-loader

18.安装webpack 默认不识别 .vue结尾文件，需要安装loader 安装 module: { //这个节点用于配置所有第三方模块，加载器 rules: [ {test: /\.vue/, use: 'vue-loader'} //处理.vue结尾的文件 ] }, cnpm i vue-loader vue-template-compiler -D 配置webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin'); plugins: [ new VueLoaderPlugin() ], module: { //这个节点用于配置所有第三方模块，加载器 rules: [ {test: /\.vue/, use: 'vue-loader'} //处理.vue结尾的文件 ] }, 在src下新建login.vue 内容如下 <template> <div> <h1>这是用 .vue文件组件</h1> </div> </template> <script> </script> <style> </style> 在index.js中加入 import login from './login.vue' var vm = new Vue({ el: '#app', data: { msg: 'vue

Webpack: Why does vue-loader not transpile?

阅读更多关于 Webpack: Why does vue-loader not transpile?

问题 I am using vue-loader V14 and Webpack 3.12. In the vue-loader documentation is says that javascript will automatically be transpiled using babel-loader, but when I look at the output I still see ES6, such as: data() { return { current: '' }; }, Here's the (relevant parts of) the webpack config: resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, module: { rules : [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['env'] } } }, { test: /\.vue$/, use: 'vue-loader' } ] } I

Property or method not defined in .vue file

阅读更多关于 Property or method not defined in .vue file

问题 Everything in my app was working perfectly fine until I began to add my javascript. Now I continuously get errors in the console. I get this error: Property or method "show" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. As well as this error: TypeError: _vm.show is not a function at click App.vue?d98c:25 at HTMLButtonElement.invoker vue.esm.js?efeb

How to Access Vue-Loader Components in an HTML File

阅读更多关于 How to Access Vue-Loader Components in an HTML File

问题 I would like to use the modular style and file format of Vue Loader (i.e., where I have a template section, script section and style section in each .vue file). What I can't figure out how to do (or if it is even possible to do) is use my custom templates in an html file. For instance, in the App.vue file I can use the following code: <template> <div id="app"> <message>Hello there</message> </div> </template> This will work to display a custom message component on the home page. What I would