Vue files as html - Githubissues

WayneHiller commented 6 years ago

I mostly use VS 2017 for my development. I was getting tired of editing .vue files as text with no intellisense or error checking (resharper). So I decided to rename my vue files as componentname.vue.html. Then in the webpack.config.js file I changed to this:

`resolve: { extensions: ['.js', '.vue.html'], alias: { 'vue$': 'vue/dist/vue', 'components': path.resolve(dirname, './ClientApp/components'), 'views': path.resolve(dirname, './ClientApp/views'), 'utils': path.resolve(dirname, './ClientApp/utils'), 'api': path.resolve(dirname, './ClientApp/store/api') } }, ....

        rules: [
            { test: /\.vue.html$/, include: /ClientApp/, use: 'vue-loader' },
            { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
            { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
        ]

`

Now I have full intellisense and error checking. Everything seems to be working fine. Has anyone else tried this?

Nordes commented 6 years ago

I personally mix VS Code with VS2017. VS Code is quite good with VueJS + all the linting + ... etc.

However for C# nothing beat Visual Studio 2017 IDE (at the moment). After I think most of the people working with vuejs use the .vue instead of a .vue.html.

WayneHiller commented 6 years ago

I use both as well as I think many developers do today. I am responsible for our entire system so I do a lot of back end systems, databases and utilities, for that VS 2017 shines. I have Vetur installed in VS Code but it does not seem to work at all anymore.

I wonder if we should add .vue.html to this template so that developers can choose what they want to use. Maybe even just the webpack setup and a note in the docs about it. I have seen a lot of questions floating around the web on how to get VS 2017 to play nice with .vue files.

mzhukovs commented 6 years ago

Guys, just install this Vue extension pack and your .vue files will give you all you expect in VS2017, no need to tag on the .html .... but with TYPESCRIPT there IS an issue that I filed here with MS and they have yet to act on it... so do note that (and if you have a workaround for that issue PLEASE let me know, thanks!) @WayneHiller

TrilonIO / aspnetcore-Vue-starter

Vue files as html #84