programing

@/xxxx/구성요소를 사용하는 방법vuejs 구성 요소를 가져오시겠습니까?

prostudy 2022. 3. 10. 22:49
반응형

@/xxxx/구성요소를 사용하는 방법vuejs 구성 요소를 가져오시겠습니까?

나는 core-ui라고 불리는 laravel이 있는 vuejs 템플릿을 사용할 수 있게 만들려고 노력하고 있다.내 문제는 이 파일에 있다.컴파일할 때 다음 오류를 지정하십시오.

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 패키지를 꺼내서 래러벨의 패키지에 넣었다.나는 답안보다 더 많은 학생이다. 나는 이 템플릿으로 작업할 수 있도록 내가 놓치고 있는 개념을 알고 싶다.

여기 내 소포를 첨부한다.혹시 모르니까 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"
 }
}

웹 팩 구성으로 매핑되며@구성 요소 디렉터리에 대한 기호.

라라벨 믹스를 사용하고 있다면, 이런 것을 당신의 몸에 첨가할 수 있다.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'); 

네 소포로 말이야json add:

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

json 밑바닥에서.

참조URL: https://stackoverflow.com/questions/52550555/how-to-use-xxxx-component-vue-to-import-vuejs-component

반응형