Как использовать @ / xxxx / component.vue для импорта компонента vuejs? - PullRequest
Новая
       26

Как использовать @ / xxxx / component.vue для импорта компонента vuejs?

0 голосов
/ 28 сентября 2018

Я пытаюсь сделать работоспособным шаблон vuejs под названием core-ui с laravel.Моя проблема с этим файлом .Когда я компилирую, выдает эту ошибку: 

These dependencies were not found:

* @/containers/DefaultContainer in ./resources/js/coreui/router/index.js
* @/views/Charts in ./resources/js/coreui/router/index.js
....

To install them, you can run: npm install --save @/containers       /DefaultContainer
....

Однако я взял из шаблона пакет .json и положил его в пакет laravel.Я студент, поэтому больше, чем ответ, я хотел бы знать, какие концепции мне не хватает, чтобы иметь возможность работать с этим шаблоном.

Здесь я прилагаю свой package.json на всякий случай. 

{
 "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
},
 "devDependencies": {
   "@vue/cli-plugin-babel": "^3.0.1",
   "@vue/cli-plugin-eslint": "^3.0.1",
   "@vue/cli-plugin-unit-jest": "^3.0.1",
   "@vue/cli-service": "^3.0.1",
   "@vue/test-utils": "^1.0.0-beta.24",
   "axios": "^0.18",
   "babel-core": "^7.0.0-bridge.0",
   "babel-jest": "^23.4.2",
   "bootstrap": "^4.0.0",
   "cross-env": "^5.1",
   "jquery": "^3.2",
   "laravel-mix": "^2.0",
   "lodash": "^4.17.5",
   "node-sass": "^4.9.3",
   "popper.js": "^1.12",
   "sass-loader": "^7.1.0",
   "vue": "^2.5.7",
   "vue-template-compiler": "^2.5.17",
   "webpack-dev-server": "^3.1.9"
},
 "dependencies": {
   "@babel/plugin-syntax-dynamic-import": "^7.0.0",
   "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
   "@coreui/coreui": "^2.0.4",
   "@coreui/icons": "0.3.0",
   "@coreui/vue": "^2.0.0",
   "bootstrap": "^4.1.3",
   "bootstrap-vue": "^2.0.0-rc.11",
   "chart.js": "^2.7.2",
   "core-js": "^2.5.7",
   "css-vars-ponyfill": "^1.9.0",
   "flag-icon-css": "^3.0.0",
   "font-awesome": "^4.7.0",
   "mini-toastr": "0.6.6",
   "perfect-scrollbar": "^1.4.0",
   "quill": "^1.3.6",
   "simple-line-icons": "^2.4.1",
   "text-mask-addons": "^3.8.0",
   "v-calendar": "^0.9.7",
   "vue": "^2.5.17",
   "vue-chartjs": "^3.4.0",
   "vue-codemirror": "^4.0.5",
   "vue-grid-layout": "^2.1.13",
   "vue-mq": "^0.2.1",
   "vue-multiselect": "^2.1.0",
   "vue-notifications": "0.9.0",
   "vue-perfect-scrollbar": "^0.1.0",
   "vue-quill-editor": "^3.0.6",
   "vue-resize": "^0.4.4",
   "vue-router": "^3.0.1",
   "vue-select": "2.4.0",
   "vue-simple-calendar": "^3.0.2",
   "vue-tables-2": "^1.4.64",
   "vue-text-mask": "^6.1.2",
   "vue2-google-maps": "^0.10.2",
   "vuelidate": "^0.7.4"
  },
  "browserslist": [
   "> 1%",
   "last 2 versions",
   "not ie <= 9"
 ],
 "engines": {
  "node": ">= 8.10.x",
  "npm": ">= 5.6.0"
 }
}

Ответы [ 2 ]

0 голосов
/ 22 июня 2019

в вашем package.json добавьте: 

"jest": {
  "moduleNameMapper": {
      "@/(.*)$": "<rootDir>/src/$1"
   },
}

внизу json

0 голосов
/ 28 сентября 2018

Конфигурация вашего веб-пакета отвечает за сопоставление символа @ с каталогом ваших компонентов.

Если вы используете Laravel Mix, вы можете добавить что-то подобное в ваш файл webpack.mix.js: 

mix.webpackConfig({
resolve: {
    alias: {
        "@": path.resolve(
            __dirname,
             "resources/assets/js/components"
            )
        }
    }
});

Итак, ваш файл должен выглядеть следующим образом: 

const path = require('path')
const mix = require('laravel-mix')

mix.webpackConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "resources/js/coreui/")
        }
    }
});

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');
...