My work with vue js
By default .dist.js files wont be copied as they are not included in the solution but are generated from webpack. Need to do the following:
To publish folder which are not “included” in the VS-Solution do:
right click the solution -> unload project
right click -> edit csproj file
add following code
|
1 2 3 |
<Content Include="Script\*"> <Visible>false</Visible> </Content> |
|
1 2 3 4 5 6 |
$.post('balbal.html', json, function(data) { // ... my code ... }) .fail(function(response) { alert('Error: ' + response.responseText); }); |
Create new Project.
In the root of the project create the following files:
– webpack.config.js
– package.json
package.json (replace the default values within <<>>)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
{ "name": "<>", "description": "<>", "version": "<>", "author": "<>", "license": "MIT", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^2.5.11" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } } |
webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
/// <binding BeforeBuild='Run - Development' /> "use strict"; var path = require('path'); var webpack = require('webpack'); var fs = require('fs'); var projectRoot = path.resolve(__dirname) module.exports = { entry: () => { const ENTRYCONTAINER = "./Scripts/Views"; function getFiles(startPath) { var results = []; if (!fs.existsSync(startPath)) { console.log("no dir ", startPath); return; } var files = fs.readdirSync(startPath); for (var i = 0; i < files.length; i++) { var filename = path.join(startPath, files[i]); var stat = fs.lstatSync(filename); if (stat.isDirectory()) { results = results.concat(getFiles(filename)) } else if (filename.indexOf('.js') >= 0 && filename.indexOf('.dist.') == -1) { results.push(filename); } } return results; }; var entryPoints = {}; getFiles(ENTRYCONTAINER).forEach(function (file) { entryPoints[file.replace('.js', '')] = './' + file; }); return entryPoints; }, output: { path: path.resolve(__dirname, './'), filename: "[name].dist.js" }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this nessessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) } |
Open cmd and in the directory where package.json file is located. Run the following npm install
Add the following in the _layout.vbhtml file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
'At the top @Code Dim controller = HttpContext.Current.Request.RequestContext.RouteData.Values("Controller").ToString Dim action = HttpContext.Current.Request.RequestContext.RouteData.Values("Action").ToString Dim hasPageScript = System.IO.File.Exists(Server.MapPath("~/Scripts/Views/" + controller + "/" + action + ".dist.js")) End Code 'Under the @Scripts.Render... section @If hasPageScript Then @RenderSection("serverdata", required:=False) @<script src="~/Scripts/Views/@(controller)/@(action).dist.js"></script> End If |
Now in visual studio Select ‘View’ -> ‘Other Windows’ -> ‘Task Runner Explorer’. Just run the ‘Run – Development’ task. Can even build while project is running.