63 |
64 |
65 | ```
66 |
67 | And so we are ready on the ASP.NET MVC part:
68 |
69 | 
70 |
71 | ## Adding the Vue.js Project
72 |
73 | Here I assume you have `Vue.js` and `Vue.js CLI` already installed.
74 |
75 | Open the command line and navigate to the `<>` folder (... `MVC_Vuejs/MVC_Vuejs`). We would like to have the Vue.js project inside it. It's name would be `vuejs_src`. So we create the Vue.js project there using the Vue.js CLI:
76 |
77 | ```
78 | vue create vuejs_src
79 | ```
80 | 
81 |
82 | I would select the defaults here, but you may configure the Vue.js project as you need it and then:
83 | - run on the command line `cd vuejs_src`
84 | - run `npm run serve`
85 | - the result should be something like: 
86 |
87 | Now if you navigate to `http://localhost:8080/` you should be able to see the Vue.js default `Hello World` page.
88 |
89 | Good to notice is that the Vue.js project comes with all kinds of extras like `.gitignore` file. So it is ready to be included in the Visual Studio solution. There you should click on the `Show All Files` button (in the toolbar on the `Solution Explorer`).
90 |
91 | > **WARNING**: When adding the vuejs_src folder to the project DO NOT RIGHT-CLICK on the `vuejs_src` folder -> `Include In Project`! - there is a bug ot something and Visual Studio freezes. Maybe because of the size of the `node_modules` folder.
92 |
93 | We do not need to include the `node_modules` folder into the solution anyways, so just right-click any file or subfolder in `vuejs_src` other than `node_modules` and select `Include In Project`. (at the time of writing they are only 7 so it is not a big deal)
94 |
95 | So now we have the Vue.js project integrated into our ASP.NET MVC solution. Next we create some Vuejs components there and use them from the ASP.NET MVC view we created earlier.
96 |
97 | ## Create the Vuejs Components and Configure the Vuejs Project
98 |
99 | > When developing Vue.js projects I prefer to use Visual Studio Code (instead of Visual Studio alone). There is no problem to do so in the workflow described here. In your file explorer you just right-click on the vuejs_src folder and select `Open with Code`. From then on you can work with both editors. Normally I work in Visual Studio for ASP.NET MVC controllers/views and C# code and in Visual Studio Code for Vue.js/Javascript code.
100 |
101 | ### Workflow Description (what exactly are we trying to achieve?)
102 |
103 | So imagine now we have an existing ASP.NET MVC project and we would like to add some nice new Vue.js components into it. We will develop these new components inside the `vuejs_src` project and put them ready for use to the ASP.NET MVC project.
104 |
105 | So here particularly we will create two extremely simple Vue.js components named `Feature1` and `Feature2`. We will configure the Vue.js project to build multiple components (`*.js` files) to a dedicated solution `vuejs` folder. From there on the ASP.NET MVC view files (or any html files from the solution) will be able to reference and use these Vue.js components.
106 |
107 | > As you surely know Vue.js has development and production mode. We would like to keep using these and furthermore we would like to be able to build development versions of our Vue.js components so we can use the Vue.js developer tools in the browser while we are running the components in the ASP.NET MVC views. So we have 3 modes:
108 | > 1) Vue.js development mode (this is the Vue.js CLI local development server with hot reload) - here we do not use the ASP.NET MVC at all!
109 | > 2) Vue.js development components integrated into the ASP.NET MVC views
110 | > 3) Vue.js components in production mode integrated into the ASP.NET MVC views
111 |
112 | ### Creating the Example Feature1 and Feature2 Vue.js Components
113 |
114 | These will be trivial components just showing a string. In the folder `vuejs_src/src` we create `Feature1.vue`:
115 | ```vue.js
116 | // vuejs_src/src/Feature1.vue
117 |
118 |
119 | Hello from Feature 1
120 |
121 |
122 |
123 |
125 |
126 |
128 | ```
129 |
130 | And similarly the `Feature2.vue`.
131 |
132 | After that we create 2 Javascript files which load the Feature1.vue and Feature2.vue. In the folder `vuejs_src/src` we create `f1.js`:
133 | ```javascript
134 | // vuejs_src/src/f1.js
135 | import Vue from 'vue'
136 | import F1 from './Feature1.vue'
137 |
138 | Vue.config.productionTip = false
139 |
140 | new Vue({
141 | render: h => h(F1),
142 | }).$mount('#f1App')
143 | ```
144 |
145 | And similarly the `f2.js` (notice `f1 -> f2` and `#f1App -> #f2App`).
146 |
147 | ### Clear the Vue.js Project from the Default Files
148 |
149 | In order to keep the example as simple as possible we may clear the default files created from Vue.js CLI template.
150 | These are `main.js`, `App.vue`, the whole content of the `components`, `assets` and `public` folders.
151 |
152 | ### Setting up Mode 1 (Vue.js Development Mode with the Live Server)
153 |
154 | We have just deleted one important file - the `public/index.html`. Vue.js uses it as template wenn building the project. So let's create templates that suit our needs:
155 |
156 | ```html
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 | Test Feature1
165 |
166 |
167 |
170 |
171 |
172 |
173 | ```
174 |
175 | Similarly we create `featureTest2.html`. Note that `f1App`and `f2App` correspond to the mounting points of the `Feature1` and `Feature2` components.
176 |
177 | We changed the name of the default template from `index.html` to `featureTest[1/2].html` so now we have to tell to Vue.js to use the new templates. For that we need configuration file - we create `vuejs_src/vue.config.js`:
178 |
179 | ```javascript
180 | //vuejs_src/vue.config.js
181 | module.exports = {
182 | pages: {
183 | feature1: {
184 | entry: 'src/f1.js',
185 | template: 'public/featureTest1.html',
186 | filename: 'index.html',
187 | title: 'Feature 1',
188 | chunks: ['chunk-vendors', 'chunk-common', 'feature1']
189 | },
190 | feature2: {
191 | entry: 'src/f2.js',
192 | template: 'public/featureTest2.html',
193 | filename: 'index2.html',
194 | title: 'Feature 2',
195 | chunks: ['chunk-vendors', 'chunk-common', 'feature2']
196 | }
197 | }
198 | }
199 | ```
200 |
201 | So now if we run `npm run serve` and start web browser we will see:
202 |
203 | 
204 |
205 | Loading `http://localhost:8080/index1.html` gives the same result. If we want to check the `Feature2` component we load `http://localhost:8080/index2.html`.
206 |
207 | You can manipulate the `filename` options in the `vue.config.js` to get the `Feature2` component loaded as default (`index.html`) or whatever other way you may want.
208 |
209 | ### Setting up Mode 3 (or Integrate the Production Versions of Feature1 and Feature2 in ASP.NET MVC View)
210 |
211 | First we have to add some options to the `vue.config.js`:
212 | ```javascript
213 | module.exports = {
214 | filenameHashing: false,
215 | productionSourceMap: false,
216 | outputDir: '../vuejs/',
217 | configureWebpack: {
218 | devtool: 'source-map',
219 | output: {
220 | filename: '[name].js'
221 | }
222 | },
223 | pages: {
224 | hanakoFeature1: {
225 | entry: 'src/hf1.js',
226 | template: 'public/hanako_feature.html',
227 | filename: 'index1.html',
228 | title: 'Hanako Feature 1',
229 | chunks: ['chunk-vendors', 'chunk-common', 'hanakoFeature1']
230 | },
231 | hanakoFeature2: {
232 | entry: 'src/hf2.js',
233 | template: 'public/hanako_feature.html',
234 | filename: 'index.html',
235 | title: 'Hanako Feature 2',
236 | chunks: ['chunk-vendors', 'chunk-common', 'hanakoFeature2']
237 | }
238 | }
239 | }
240 | ```
241 | **Notes:**
242 |
243 | - `filenameHashing` - currently Vue.js CLI cannot use the `filenameHashing` feature when the template is not the `index.html`. On the other hand we want all things running automatically when integrating into an ASP.NET MVC view. If the hash changes on every `vuejs_src` project build, one has to change the `src` parameter in the view on every `vuejs_src` build. At the moment I do not know if it is possible in Vue.js to use constant hashes and how to use hashes without the `index.html` template. This would be a point for improvement.
244 |
245 | - `outputDir` - this is the dedicated folder where the ready to use `Feature1` and `Feature2` components will be placed after the `vuejs_src` project build. After a successful build we can include this folder to the solution and also to the source control system.
246 |
247 | If you do not specify the `outputDir` you will get everything in the `vuejs_src/dist` folder by default
248 |
249 | So now let's build the components:
250 | ```
251 | npm run build
252 | ```
253 |
254 | If you go to the `../vuejs/` folder you will find `feature1.js`, `feature2.js` and the `*.html` files generated from the templates. Currently I do not know how/if one can suppress their creation. There is one more file created `js/chunk-vendors.js`. I do not know how to configure the Vue.js CLI to put this file along with the others and not under the `js/` folder. Anyway it is not really big limitation.
255 |
256 | Next we go to the ASP.NET MVC view file we created earlier and we add to it:
257 | ```razor
258 |
259 |
260 |
261 |
262 |
263 | ASP.NET MVC and Vue.js Integration
264 |
265 |
266 |
267 |
268 |
269 |
270 |
ASP.NET MVC and Vue.js Integration
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 | ```
284 |
285 | Now we can start the ASP.NET MVC application we created and voilà:
286 |
287 | 
288 |
289 | Note that if you want to debug the application in the browser using the Vue.js developer tools you won't be able to do so, because we builded the components in production mode.
290 |
291 | 
292 |
293 | So let's enable that in the next step.
294 |
295 | ### Setting up Mode 2 (or Integrate the Developer Versions of Feature1 and Feature2 in ASP.NET MVC View)
296 |
297 | We only have to create one additional build step to do so. To acheive it we add new `build:dev` command to our `vuejs_src/package.json`:
298 |
299 | ```json
300 | {
301 | "name": "vuejs_src",
302 | "version": "0.1.0",
303 | "private": true,
304 | "scripts": {
305 | "serve": "vue-cli-service serve",
306 | "build": "vue-cli-service build",
307 | --> "build:dev": "vue-cli-service build src/f1.js src/f2.js --mode development",
308 | "lint": "vue-cli-service lint"
309 | },
310 | "dependencies": {
311 | ...
312 | }
313 |
314 | ```
315 |
316 | There is another small inconvenience here to fix. The result of this new command:
317 | ```
318 | npm run build:dev
319 | ```
320 | are only the `feature1.js` and `feature2.js` components (much bigger in size!). So we have to comment the lines in the ASP.NET MVC view file for the `chunk-vendors.js` - otherwise the browser will show `404 Not Found` error. But after that you only have to reaload the page (`Ctrl+F5`) and there it is - the Vue.js developer tools work now perfectly:
321 |
322 | 
323 |
324 |
--------------------------------------------------------------------------------