Build large project with Vue.js and Webpack

Vue cli template

Neutronium provides a vue-cli template neutronium-vue that provides many advantages to develop large project with Neutronium vue:

• During development use web-pack-dev-server and chrome to cretae the UI
• Use ES6, sass, less...
• Decompose your project in maintanable vue files during development
• Use npm to manage your dependencies
• Use Webpack build to generate all files you need to refence in Neutronium

To install neutronium vue template use vue-cli If not installed, install first vue-cli:

$ npm install -g vue-cli

Then in the view folder create your project

$ vue init NeutroniumCore/neutronium-vue view1
$ cd view1
$ npm install
$ npm run dev

##npm scripts

npm run dev

Debug your view in the browser. MainView model data are provided by json file: data\data.json

npm run build

Generate files ready to be used in Neutronium in the dist folder: you have to reference these files (Content/Copy Always) in visual studio.

##Step by step installation

1. Open folder where you want to install the view from VS
   

2. Install template ``` bash $ vue init David-Desmaisons/neutronium-vue about ``` 3. npm install ``` bash $ cd about $ npm install ``` 4. Begin developping the view using hot-reload (you may use atom or sublime to edit js files) ``` bash $ npm run dev ```
5. Once the view is ready build the files ``` bash $ npm run build ``` 6. Include the files in VD * Click show all files

* Include the files in project: DO NOT INCLUDE files under node_modules

* Set Properties on dist files: Content/Copy Always

7. Run C# application

##Folder organization

├── data
├── dist
├── src
│   ├── asset
│   ├── components
│   ├── App.vue
│   ├── entry.js
│   └── main.js
├── index.hml

Data: contains the data.json which is the viewmodel data used during developement in the browser. Dist: contains generated files to be used in Neutronium src: contains assets (folder assets), vue components (folder components), main component: App.vue. You should not edit entry.js nor main,js which are bolierplate files needed for the built. Both index.html files (fromm root and dist) should not be edited for the same reason.

##Main file:

App.Vue represent the main entry of the vue application, its prop ``mainViewModel``` represent the C# viewModel

##Tips:

You can generate a Json from viewModel captured in a Neutronium debug session and use it as data.json in order to create the view with a realistic ViewModel.

###Additional vue.js components