- 当执行
1npm run serve
时 ，报错
|
1 2 |
Failed to resolve loader: sass-loader You may need to install it. |
这是因为.vue文件包含有这么一段代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style lang="scss"> .login { @include media-breakpoint-down(md) { width: 100%; padding-right: 2rem; padding-left: 2rem; .down-container { display: none; } } h2 { text-align: center; } width: 21.375rem; .down-container { margin-top: 3.125rem; } } </style> |
解决方法是 ；
|
1 2 |
npm i sass-loader npm i node-sass |
不需要手动改 package.json , 会自动加进去
-
How to use Bootstrap 4 media query mixins
原因是第一个例子中有这句代码
|
1 |
@include media-breakpoint-down(md) |
出自 Bootstrap 4 media query mixins
Bootstrap 4 media query mixins 的作用是 ： 设置页面的布局 ， 当size发生变化时 ， 触发相应的断点
详见 https://mdbootstrap.com/docs/vue/layout/overview/
https://mdbootstrap.com/docs/vue/layout/grid-usage/
解决方法是 ：
package.json dependencies 加
|
1 2 3 |
"sass-loader": "^7.1.0", "bootstrap": "4.3.1", "awesome-bootstrap-checkbox": "1.0.0-alpha.5" |
devDependencies 加
|
1 |
"sass-resources-loader": "^1.3.3" |
之后 nmp install
跟目录加 vue.config.js , 内容为
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
const path = require('path') module.exports = { lintOnSave: false, pages: { index: { // entry for the page entry: 'src/main.js', // the source template template: 'public/index.html', // output as dist/index.html filename: 'index.html', // when using title option, // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title> title: 'Vuestic Admin', // chunks to include on this page, by default includes // extracted common chunks and vendor chunks. chunks: ['chunk-vendors', 'chunk-common', 'index'], }, }, configureWebpack: { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.resolve('src'), 'src': path.resolve('src'), 'assets': path.resolve('src/assets'), 'components': path.resolve('src/components'), 'services': path.resolve('src/services'), 'directives': path.resolve('src/directives'), 'vuestic-mixins': path.resolve('src/vuestic-theme/vuestic-mixins'), 'vuestic-components': path.resolve('src/vuestic-theme/vuestic-components'), 'vuestic-directives': path.resolve('src/vuestic-theme/vuestic-directives'), 'vuestic-theme': path.resolve('src/vuestic-theme'), 'data': path.resolve('src/data'), 'vuex-store': path.resolve('src/store') } }, }, css: { loaderOptions: { // pass options to sass-loader sass: { // @/ is an alias to src/ data: `@import "@/sass/shared.scss";` } } } } |
把 vuestic-admin-master 的 sass 和 vuestic-theme 文件夹copy 过去
- 如何在 vs code debug Vue
|
1 |
https://vuejs.org/v2/cookbook/debugging-in-vscode.html |
|
1 |
https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html |
需要先载入folder
最初的 json是
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ] } |
- 怎么在 component 里使用另一个 component
详细见
|
1 |
https://flaviocopes.com/vue-import-component/ |
- 怎么在 vue 使用 scss
https://flaviocopes.com/vue-using-scss/
- .vue 文件的 $t 是什么意思
1<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js">
是支持 unicode的意思 ， 可以去掉
- 怎么载入 scss
例子程序的scss 文件在 ： F:\code\Vue\vuestic-admin-master\src\vuestic-theme\vuestic-sass\overrides\_material-forms.scss
- 为什么用 vue_cli 3.0 建立的程序一开始没有 vue.config.js
因为默认的并不需要，将来如果用到， 可以自己加
Where is the config files and why isn’t it anywhere in the top level folders, etc?
The initial project doesn’t require the file to exist because you just created a project with fresh “default” settings that don’t require any config.
Just create it yourself. it’s even mentioned in the README:
Many aspects of a Vue CLI project can be configured by placing a vue.config.js file at the root of your project. The file may already exist depending on the features you selected when creating the project.
(emphasis mine)
Edit: now to be found here: https://cli.vuejs.org/config/#global-cli-config
********** vue开源程序的 vue.config.js是这样的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
const path = require('path') module.exports = { lintOnSave: false, pages: { index: { // entry for the page entry: 'src/main.js', // the source template template: 'public/index.html', // output as dist/index.html filename: 'index.html', // when using title option, // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title> title: 'Vuestic Admin', // chunks to include on this page, by default includes // extracted common chunks and vendor chunks. chunks: ['chunk-vendors', 'chunk-common', 'index'], }, }, configureWebpack: { devtool: 'source-map', resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.resolve('src'), 'src': path.resolve('src'), 'assets': path.resolve('src/assets'), 'components': path.resolve('src/components'), 'services': path.resolve('src/services'), 'directives': path.resolve('src/directives'), 'vuestic-mixins': path.resolve('src/vuestic-theme/vuestic-mixins'), 'vuestic-components': path.resolve('src/vuestic-theme/vuestic-components'), 'vuestic-directives': path.resolve('src/vuestic-theme/vuestic-directives'), 'vuestic-theme': path.resolve('src/vuestic-theme'), 'data': path.resolve('src/data'), 'vuex-store': path.resolve('src/store') } }, }, css: { loaderOptions: { // pass options to sass-loader sass: { // @/ is an alias to src/ data: `@import "@/sass/shared.scss";` } } } } |