Skip to content

Build large project with Vue.js and Webpack

David Desmaisons edited this page Nov 12, 2016 · 13 revisions

#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)[https://github.com/vuejs/vue-cli] If not installed, install first vue-cli:

$ npm install -g vue-cli

Then in the view folder create your project

$ vue init David-Desmaisons/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

* Set Properties on dist files: Content/Copy Always
7. Run C# application

##Folder organization

+root
+-data
+-dist
+-src
 +-assets
 +-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.

###[Binding in Depth](https://github.com/David-Desmaisons/Neutronium/wiki/Binding in Depth)

Clone this wiki locally