我正在开始一个新的vue.js项目,所以我使用vue-cli工具来构建一个新的webpack项目(即vue init webpack).

当我浏览生成的文件时,我注意到文件中有以下导入src/router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

我以前没见过@路径中的at符号().我怀疑它允许相对路径(也许？)但我想确定我理解它真正的作用.

我尝试在网上搜索,但无法找到解释(因为搜索"at sign"或使用文字字符@没有帮助作为搜索条件).

@在这条道路上做了什么(链接到文档会很棒)这是一个es6的事情？一个webpack的东西？一个vue-loader的东西？

UPDATE

感谢Felix Kling指出我关于同一个问题的另一个重复的stackoverflow问题/答案.

虽然对其他stackoverflow帖子的评论不是这个问题的确切答案(在我的情况下它不是一个babel插件)但它确实指出了我找到它的正确方向.

在vue-cli为你创建的脚手架中,基本webpack配置的一部分为.vue文件设置了一个别名:

这有意义,因为它为您提供了来自src文件的相对路径,并且它删除.vue了导入路径末尾(通常需要)的要求.

谢谢您的帮助!

是否可以在命名空间模块之间调度操作？

例如,我有vuex模块"gameboard"和"notification".每个都是命名空间.我想从游戏板向通知模块发送一个动作.

我以为我可以在调度操作名称中使用模块名称,如下所示:

// store/modules/gameboard.js
const actions = {
    myaction ({dispatch}) {
        ...
        dispatch('notification/triggerSelfDismissingNotifcation', {...})
    }
}

// store/modules/notification.js
const actions = {
    triggerSelfDismissingNotification (context, payload) {
        ...
    }
}

但是当我尝试这样做时,我得到的错误让我觉得vuex试图在我的游戏板模块中发送一个动作:

[vuex] unknown local action type:notification/triggerSelfDismissingNotification,global type:gameboard/notification/triggerSelfDismissingNotification

有没有从vuex模块调度到模块的方法,还是需要在root vuex实例中创建某种桥接？

我有一个具有一组特定起始数据的组件:

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
        submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: null,
            address: null,
            position: null
        }
}

这是模态窗口的数据,所以当它显示我希望它从这个数据开始.如果用户从窗口取消,我想将所有数据重置为此.

我知道我可以创建一个方法来重置数据,只需手动将所有数据属性设置回原始数据:

reset: function (){
    this.modalBodyDisplay = 'getUserInput';
    this.submitButtonText = 'Lookup';
    this.addressToConfirm = null;
    this.bestViewedByTheseBounds = null;
    this.location = {
        name: null,
        address: null,
        position: null
    };
}

但这看起来真的很草率.这意味着如果我对组件的数据属性进行了更改,我需要确保记得更新reset方法的结构.这并不是绝对可怕的,因为它是一个小的模块化组件,但它使我的大脑的优化部分尖叫.

我认为可行的解决方案是在ready方法中获取初始数据属性,然后使用保存的数据重置组件:

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', 
        submitButtonText: 'Lookup', 
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: …

我正在尝试使用webpack-dev-server编译文件并启动一个开发Web服务器.

在我package.json的脚本属性设置为:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

所以--hot,--inline应该启用网络服务器和热重装(据我所知).

在我的webpack.config.js文件中,我设置了entry,output和devServer设置,并添加了一个加载器来查找.vue文件中的更改:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

所以通过这个设置,我运行npm run dev.webpack-dev-server启动,模块加载器测试工作(即当我保存任何.vue文件时,它会导致webpack重新编译),但是:

• 浏览器永远不会刷新
• 存储在内存中的已编译的javascript永远不会被浏览器使用

在第二个项目符号中,我可以看到这一点,因为在浏览器窗口中,vue占位符永远不会被替换,如果我打开javascript控制台,Vue实例永远不会创建或全局可用.

我错过了什么？

我有一个Bootstrap面板,页脚中有两个按钮:

    <div class="panel-footer">
        {{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
            {{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
        {{ Form::close() }}
        {{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
            {{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
        {{ Form::close() }}
    </div>

每个按钮的表单都有类pull-left,pull-right因此它们每个都浮动到面板页脚的任一侧.

浮动工作正常,但按钮现在位于页脚之外:

我尝试使用网格系统而不是拉助手,但我最终得到了相同的结果.

我也一直在寻找解决方案(我认为这很常见)并且没有找到不需要用自定义css覆盖Bootstrap的解释.

是否有可能只使用Bootstrap解决这个问题,还是我需要抛出自己的css来修复它？

我有一个用于laravel安装的composer文件,其中包含以下composer.json文件:

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "laravel/framework": "4.1.*"
    },
    "autoload": {
        "classmap": [
            "app/commands",
            "app/controllers",
            "app/models",
            "app/database/migrations",
            "app/database/seeds",
            "app/tests/TestCase.php"
        ]
    },
    "scripts": {
        "post-install-cmd": [
            "php artisan clear-compiled",
            "php artisan optimize"
        ],
        "post-update-cmd": [
            "php artisan clear-compiled",
            "php artisan optimize"
        ],
        "post-create-project-cmd": [
            "php artisan key:generate"
        ]
    },
    "config": {
        "preferred-install": "dist"
    },
    "minimum-stability": "stable"
}

我正在尝试添加哨兵包.在哨兵的网站上,它说我可以通过在composer.json文件中添加以下内容来安装它:

{
    "require": {
        "cartalyst/sentry": "2.0.*"
    },
    "minimum-stability": "dev"
}

我尝试在当前laravel的末尾添加新的json对象,如下所示:

...
},
{
    "require": …

我有一个npm脚本,我正在尝试调试.我使用vscode所以我想我会创建一个调试配置并使用调试器逐步完成它.

我的npm脚本看起来是:

"scripts": {
    ...
    "dev": "node tasks/runner.js",
}

所以我创建了以下调试配置:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "cwd": "${workspaceRoot}",
            "runtimeArgs": [
                "run", "dev"
            ],
            "port": 5858,
            "stopOnEntry": true
        }
    ]
}

当我启动它时脚本运行,但vscode永远无法连接,我得到错误:

无法通过'legacy'协议连接到运行时; 考虑使用'inspector'协议(10000毫秒后超时).

我尝试添加一个检查器协议:

       {
            "type": "node",
            "request": "attach",
            "name": "Attach (Inspector Protocol)",
            "port": 9229,
            "protocol": "inspector"
       }

并通过以下方式运行npm脚本:

npm run dev --inspect

而这次我收到错误:

确保使用--inspect启动Node.无法连接到运行时进程,10000毫秒后超时 - (原因:无法连接到目标:连接ECONNREFUSED 127.0.0.1:9229).

我不确定我错过了哪一部分.

编辑每个重复标记

我看到另一个问题:通过vscode调试npm脚本,但其他问题和答案中的详细信息并不详细和具体.如果有人正在搜索我遇到的特定vscode错误消息或我遇到的配置类型,则他们不一定会得到此问题所选答案给出的级别答案详细信息.

在我的laravel项目中,我创建了一个名为的模型CustomerLinks.该模型位于该app/models文件夹中.我的作曲家文件有一个自动加载:

"autoload": {
    "classmap": [
        ...
        "app/models",
        ...

    ],
    ...
},

我use在我的ExtendedUserController中有一个语句引用CustomerLinks:

<?php

...
use CustomerLinks;
...

class ExtendedUserController extends UserController {

我的理解是,由于composer文件中的autoload属性在类映射中有app/models,这意味着我应该能够在use CustomerLinks没有名称空间前缀的情况下使用.

这是有效的,但每当我更改我的ExtendedUserControler并重新加载我的浏览器时,我都会收到错误消息:

The use statement with non-compound name 'CustomerLinks' has no effect

该错误指向use CustomerLinks行扩展用户控制器.

当我做的时候composer dump-autoload一切正常,但是当我必须遵循这个模式时,它变得非常恼人

进行更改 - >转储自动加载 - >刷新浏览器 - >重复

有没有办法处理错误？

我正在学习vue.js的指南,进入道具部分,并遇到了一个问题.

我知道子组件有孤立的scops,我们使用props配置从父进程传递数据,但是当我尝试它时,我无法让它工作.

我有一个例子我正在研究js小提琴:

var vm = new Vue({
   el: '#app',
   // data from my parent that I want to pass to the child component
   data:{
       greeting: 'hi'
   },
   components:{
        'person-container':{

            // passing in the 'greeting' property from the parent to the child component
            props:['greeting'],

            // setting data locally for the child
            data: function (){
                return { name: 'Chris' };
            },

            // using both local and parent data in the child's template
            template: '<div> {{ greeting }}, {{ name …

我刚刚开始使用Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader,我有点失落.

我想要做的是使用我的SPA Vue.js代码的SASS版本的bootstrap.我想这样做,所以我的引导自定义可以使用SASS完成.这就是我所做的:

• 使用vue-cli创建了一个新的Vue.js + webpack项目.
• 安装bootstrap-sass和sass-loader.

• 在build/webpack.base.conf.js中添加了以下内容:

  { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
  { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }
  

  Run Code Online (Sandbox Code Playgroud)

• 用一行创建了src/style.scss: @import 'bootstrap';

• 将此行添加到src/main.js的顶部: import './style.scss'

当我现在运行时,npm run dev我收到以下错误:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
@ ./src/main.js 3:0-25

我不确定为什么这不起作用.

此外,与此问题相关,如何访问Vue组件中的Bootstrap SASS变量？如果我理解这里发生了什么,SASS将被编译为CSS,然后被包含在main.js内联中,这意味着我的组件中无法访问任何Bootstrap变量.有没有办法实现这个目标？