README.md VueJS 2 Example Project (and Tutorial) A scalable Single Page Application (SPA) example. This example uses Vue-cli, VueRouter, Vuex, VueResource and more. Clone the repo, do npm install, and use right away or read through this tutorial below to get an idea of how to build the project from scratch and setup Sublime Text. Table of Contents • • • • • • • • • • • • • • • • • • • • • Todo • Currently, remote calls are made to an online example OAuth2 demo server by Brent Shaffer. We can remove this and instead setup up a Node.js Express OAuth2. • Add a section in this tutorial about working in a production environment.

Vue-example-project - Example Vue 2 Project (a scalable Single Page App using Vue-cli, VueRouter, Vuex and more).

• File splitting (Webpack's CommonChunksPlugin and etc.) and improving page load times. Install Node Install Node and NPM (Using PPA to get latest version) Get the setup script. $ sudo npm install -g vue-cli $ vue init webpack example-vue-project (Note: If you've already installed the cli before and when you init a new project you get the message: A newer version of vue-cli is available, then ctrl+c at the prompt and then: sudo npm install vue-cli -g to update (re-install) vue-cli to the latest version.) Now you'll get some output like this:? Project name: example-vue-project? Project description: A Vue.js project? Author: Your Name? Vue build: Runtime-only # saves you 6kb?

Install vue-router? Use ESLint to lint your code? Pick an ESLint preset: none # we'll use a vue specific preset based on Standard?

Setup unit tests with Karma + Mocha? Setup e2e tests with Nightwatch? Y vue-cli Generated 'example-vue-project' Install dependencies in package.json. $ npm install stylus -g # install stylus globally for Sublime $ stylus -V # this confirms that stylus has been added to your path, if not, you need to do so for it to work correctly with Sublime $ npm install stylus stylus-loader --save-dev # also install locally See Sublime Text 3 section further down for installing the Stylus package for it. (This concludes all extra dependencies, however feel free to check the package.json in the Github repo) Configure JQuery and Lodash and Tether Option #1: Use ProvidePlugin Add the to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery and Lodash become globally available to all your modules (and also Tether for Bootstrap): build/webpack.dev.conf.js, build/webpack.prod.conf.js.

Import 'expose?$!expose?jQuery!jquery ' //. Global Utilities Using the ProvidePlugin in the previous section, we were able to include jQuery and Lodash in all modules that used it. But these were from node_modules. What if we want to do this with one of our own modules from our project (so we don't have to directly require it each time we need it). In the previous section you can see we added utils to the ProvidePlugin. Now let's actually create a module (in the Node form) in our src/ directory for keeping these utilities we want globally: src/utils.js.

$ mkdir store Now let's create the following files that will comprise our central Vuex storage. Vuex State Let's setup the state of our central data storage.

We'll want some state to be available accross browser tabs (and when the app is closed/reopened) so let's sync this state with LocalStorage. When the app bootstraps, we want to first check in the browser's localStorage and retrieve all of our previously stored data. We'll also have other state we can use for to make component-to-component communication easier (for situations where you don't have a simple parent-child communication, but more complex sibling-to-sibling or other component relationships).

Let's just add a property for storing the search text and button press on the navbar for demonstration purposes. $ rm App.vue In the /src/components folder create the following folders and.Vue files (just copy these directly from this repo): /src /components - App.vue - AppFooter.vue - AppNav.vue - Hello.vue /common - Countries.vue - Spinner.vue - countries.data.js /dashboard - Dashboard.vue - AddressModal.vue /login - Login.vue /signup - Signup.vue /users Here we use a folder for each 'page' in our SPA. This allows us to represent 'pages' with more than a single.Vue file.

We can ad other supporting.Vue components,.js files, or data files. There's also a common folder to put any components we feel don't necessarily belong to a page parent. If over time you feel there are too many folders, you can further group/consolidate pages into folders ('page group folders'). Twitter Bootstrap 4 Configuration • Install Bootstrap 4 and Tether.js, see section:.

• Add Tether to providePlugin, see section: • Require in main.js: see section: • Add a folder style (if you haven't already) to your /assets directory and create the following file: src/assets/style/_variables.scss. /* Font Awesome */ $fa-font-path: './././node_modules/font-awesome/fonts '; @import './././node_modules/font-awesome/scss/font-awesome'; /* Roboto */ $roboto-font-path: './././node_modules/roboto-fontface/fonts '; @import './././node_modules/roboto-fontface/css/roboto/sass/roboto-fontface'; Images and Other Assets Create an images folder at src/assets/images then cut an paste the Vue logo.png file that resides in the assets folder by default.

The Navbar component uses a relative link to this image, which Webpack will resolve for us automatically. You can read more about static assets here: App scss Bring everything to together into an app.scss file that we import in our main entry: src/assets/style/app.scss @import 'fonts'; @import 'variables'; @import '. My Tribe Pc Game Full Version Free Download. /././node_modules/bootstrap/scss/bootstrap'; @import './././node_modules/vue-multiselect/dist/vue-multiselect.min.css'; Of course if this file gets too big, you can break it up into different supporting files: _forms.scss, _blah-blah.scss, etc. Unit Testing and End-to-End Testing Make sure you installed babel-polyfill earlier in this tutorial or es6 promises won't work in PhantomJS. If you didn't, you can install it with. Npm run test You should see some output initially showing the results of each unit test ran: Hello.vue ✓ should render correct contents. PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.018 secs / 0.004 secs) TOTAL: 1 SUCCESS Then the Selenium server will fire up Chrome browser and run the e2e tests to see if those pass: ✔ Element was visible after 65 milliseconds. ✔ Testing if element is present.

✔ Testing if element contains text: 'This is the dashboard'. 3 assertions passed. (18.522s) You can of course run unit tests and e2e tests seperately with: npm run unit and npm run e2e.

Run the Dev Server Run the dev server. $ cd ~/example-vue-project $ npm run dev Open your browser and visit. You should see something like this: Vue Dev Tools Visit the Chrome Web Store to get the for helping debug Vue.js applications. Once installed, Open Chrome dev tools and go to the 'Vue' tab.

Vuex Tab If you click on the 'Vuex' tab, you can see all data from the store in the right pane. Click the export button to copy the data to the clipboard. Click the import button and paste the clipboard data there. For example, you can alter the accessToken to something invalid (to simulate an expired oauth access_token without waiting on actual expiration) in the pasted data. Then click the import button again and the Vuex store will live update. Now you can confirm that the automatic refreshToken interceptor works. Create and Publish a Library for Other Developers to Use So now you want to go further and develop a component that others can npm install and import into their own project?

Here you go: Quick Learning Webpack Resources • SurviveJs: • Official Webpack Tutorial.