i have a vuejs project structure which look like
when served through vue-cli-service, the source tab from devtool has only
so when i try to add breakpoint to other files in the src/ like filters,utils,...
it's not working(becomes unbound breakpoint), is there any way to add entire src/ to webpack.
debugger statement works but not vscode breakpoint
Thanks in advance.
Related
Whenever I was creating a new Nuxt project, there were directories like: components, pages, static, store, .nuxt, node_modules but there are no layouts and other directories as of right now.
How can I fix that?
You are probably referring to this question: Some of the directories are missing when I'm trying to create a new Nuxt js project
My answer is in there!
Also, .nuxt is a cache directory that you should not touch to, same goes for node_modules so far. node_modules will be available if you yarn normally.
PS: this is based on the assumption that you are doing npx create-nuxt-app <project-name>.
enter image description here
When I click Disable(Workspace) the error is:
Cannot disable extension 'ESLint'. Extension 'Node.js Extension Pack' depends on this.
In what other way can react-native errors be eliminated???
You need to define .eslintignore file in your root directory and add the path of the folder you wish to ignore from linting.
Reference: https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
The suggested way to solve the issue is to resolve all the linter issues as they can help you to overcome some scaling issues and make your code consistent.
Workaround for the problem is you can create a file .eslintignore in the root directory of your project and add the file path for which you want to disable the linter.
To disable the Eslint. You can follow the steps.
Navigate to the folder where you defined package.json (Project root directory).
Create a new file with the name .eslintignore
Edit the .eslintignore to add the files where you do not want the linter. Example, you have an src directory where all the react code is present, you want to diable linters for whole src directory. Add the following line in .eslintignore.
src/*
Don't know if you can disable it all but this worked for me for the time being add this // eslint-disable-next-line before the line it warned about
I'm trying to setup a file watcher in PyCharm for my SASS files. I've followed the official guide and it worked jsut fine (https://www.jetbrains.com/help/pycharm/transpiling-sass-less-and-scss-to-css.html#)
Now I'd like to change the destination of the compiled CSS files to a specific folder, relative to the SASS file. Basically, the output directory should be ../css/ when starting from the SASS file, because my structure looks like this:
app1/
static/
css/
myfile.css
sass/
myfile.sass
app2/
static/
css/
myfile2.css
sass/
myfile2.sass
I'm not sure I understand what values I should put in arguments and output paths to refresh. I'm currently using the default settings (https://imgur.com/a/rrIJHeR)
I solved it. For anyone struggling with the same issue, here's how I fixed it:
Arguments = sass\$FileName$:css\$FileNameWithoutExtension$.css
Output = css\$FileNameWithoutExtension$.css
Working Directory = $FileParentDir$
Here's an image of the setup :
My question is related to webpack. Let's say I'm using webpack and vue.js project. How does webpack build the project when I run the npm run build. I know that there's a build folder where config files have to be added and there'll be output folder dist which will save my final project.
Question 1) WHat does webpack do? Does it search entry point in config file so that it knows where to start building process from? for vue.js it's src/main.js. AM I right?
QUestion 2) when it finds main.js, what does it do? does it go from main.js to top so that to find all the dependencies ?
QUestion 3) Let's say IT found a .vue file. what does it do? does it seperate js code - put it into some other js file, then seperate css and put it into some other css file? or just take the whole .vue code and puts it into js file(with all its html and so on)?
QUestion 4) Just need that line of code what it looks to show me QUestion 3) answer.
Yes, webpack has an entry point (entry section from config). It's not src/main.js exactly, it's configurable.
It builds a dependency tree starting from an entry point.
It will be handled with loaders in the sequence you provided. Usually, it's vue-loader which transforms vue files to js, next it goes to babel-loader which transpiles your js dialect (Flow/ES6/ES2017/TS) to ES5, next ot js-loader which can finally split all the code to dependencies and continue loading.
CSS separation can be done with webpack plugins like ExtractTextWebpackPlugin and then your css dialect (LESS/SASS/PostCSS, etc) will be transformed with loaders, i.e. sass-loader, css-loader, style-loader.
When styles extraction plugin is not present, it will distribute css along with js and put it to the head styles.
I have a project started with the vue-cli, and i'd love to include a component from a different local folder. I'm not that great at webpack config, so I'm not sure if it's just as simple as adding another path to some config setting. I've looked around in the docs, but everything I'm finding shows me the awesome auto scaffolding that vue init project gives us.
Any ideas?
Here's what the project structure looks like:
webroot/
-wp-content/
-wp-admin/
-wp-includes/
-other PHP classes/
-static/
-vue/
-global-components/ (<- this is where i'd like to put some generic .vue components)
-app1/ (<- this was created by vue-cli and is where i'd like to build a specific vue app for a specific wordpress page/post)
-app2/ (<- this was created by vue-cli and is where i'd like to build a different app for a specific wordpress page/post)
So, you can see there's a bunch of things going on in this repo, and I'd like to be able to reference both the src folder inside app1 and app2, but also have each app reference the global-components folder. I'm not sure that the client would like to push their custom components up to npm, and I don't think they want to build out their own private npm source, so I was hoping for a way to build multiple vue.js applications without copying these components to each individual app.
Any thoughts?