how i can add a vue template in exist project - vue.js

how i can add a vue template like this :
vue-paper-dashboard
in my vue cli project
i want just add it in specify route like :
/admin/
in documentaion just write about run demo
but its folder like a complete project and i dont know how i can add it to specify part of my project

If I understood you correctly what you can do to is right click on the vue-pager-dashboard and inspect so the developer tools shows up. When the developer tools shows up click on the sources like the picture below
After that you will see webpack you can go in there and see how they made their files and designed the dashboard so you can from there work your way and copy the important parts that you want in your project. In the (. dot) folder you can see the routes plugins etc.. and in the src folder you can see pages components well in both folders you can see the components. So this is the way you can do it but if it isn't as you asked or didn't help you out be more specific with your question.

Related

how to use vue.js offline?

Hi I received a web project with all already implemented CSS js HTML code, directories, project structure etc.
I have to make changes in view.js but I don’t always have internet access on the move so is there a way to continue this project locally without changing my project structure?
I already have an existing web project whose file contains
-an HTML page
-a CSS file
-a js file
Place in their folders respectively
I want to use view.js on this project
The problem I don’t always have internet access when I’m on the move.
So how do I use seen?
Knowing that:
CDN is a script placed in HTML requiring a connection to run view
-Vue CLI is a package that allows to generate a new project view "certainly out of competition"
But I should start over
Because the directory structure and already predefined what doesn’t suit me.
How does it work?
How to just add view and continue the project without zero spread?
I already installed node.js (npm) on my pc if its can help .
"-- IN BRIEF:
If you still don’t understand
Imagine being entrusted with a web project all made HTML CSS JS already configure etc...
And you must use VUE to make changes
knowing that on the move you don’t always have the connection
How do you do that?
Assuming (I can't tell 100% from your description) that it is an un-compiled implementation that uses the CDN, you can easily handle this by copying the vue library locally and update the html to use the local version instead of the CDN.
if you need to keep the html, you could use a browser plugin like requestly but there are many others. There you can select the url that goes to the cdn and replace it with the local one.
Another option for chromium-based browsers is to use local overrides. Picture upload is not working currently, so can't include a picture, but the option is available through the sources tab in the developer tools. You need to enable overrides, select a folder, then you can select the resource that you want to serve from local override.

How to proper integrate PrismJS into a Eleventy project?

I'm building a site using eleventy and want to include code examples with code-highlighting. Prism looks like a great choice for this. How would I add it proper to the build process (not as CDN)?
Use the download option. This gives you the JS/CSS you need. Copy it to your site and ensure you are using the "Passthrough File Copy" (https://www.11ty.dev/docs/copy/) option to copy CSS and JS files over.

How to make it visible in github.io for a vue-cli project

I have created a vue-cli project.
After I run build it, it works in the http-server. I'd like to push it to my github.io, and I build it as what I found on the Internet. However, at https://tsunaou.github.io/VueJiaogaiFront/dist/index.html I can only see a blank page and it show like this,nothing in the div whose id is app.
enter image description here
It looks like you're building Github Pages from master. To make this work you'll either need to build into a directory called docs (instead of dist) and change the settings on your repo to point to docs, or move the built files up to the project root.
It's in the documentation:
deployment to github pages

Load Vue Component from ouside src directory

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?

Combine all my custom JS into one single file with dojo build

I'm having a hard time trying to set up dojo build in my project.
Basically, I have my js folder with all my custom widgets and components. I simply want to combine all javascript files form js folder into one single file.
dojo sources are located outside this folder. The structure looks similar to this:
/public
/prod
/dojo-1.9
/dijit
/dojo
/dojox
/js
myScript1.js
myScript2.js
Do you have any idea on how should I configure the package.json and profile.js? The documentation doesn't seem to help since all I am getting is an output folder with the same contents as the js folder (no javascript is merged).
You can start by reading this article:
https://dojotoolkit.org/reference-guide/1.10/build/simpleExample.html
It provides a simplified overview of dojo build system.
Additional there is dojo boilerplate with a sample of folder structure and profile.js configuration for quick start here:
https://github.com/csnover/dojo-boilerplate
I definitely suggest you to use the boilerplate as start for your project as it simplify a lot initial configurations.