1.准备

全文重点在于搭建环境,其他相关知识点请百度。

  • VS2017 升级到最新的版本
  • 安装 net core 2.0
  • 安装 npm (npm相关使用请百度或咨询前端小伙伴)
  • 全局安装 webpack (webpack相关使用请百度或咨询前端小伙伴)
  • vue 的使用 (推荐看一下vue创建的webpack项目模板)
  • axios的使用,vue中用于调用后端接口的方法

2.创建AspNetCore MVC项目

3.清空项目

删除不必要的文件后,项目文件结果如下:

4.初始化项目

4.1 在项目web层执行npm init 命令,然后一直回车,最终项目会生成package.json文件

4.2 修改package.json文件,内容如下,修改完成之后,在项目下执行“npm i”命令安装npm包。PS:了解npm的package.json作用是啥,scripts,dependencies,devDependencies 这三个节点有啥用。一定要知道安装的每个包是干啥用的

{
  "name": "tcbase.aspnetcore.vuejs.template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^7.1.2",

    "vue": "^2.4.2",
    "vue-loader": "^13.0.4",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.4.2",
    "vuex": "^2.3.1",
    "axios": "^0.16.2",
    "css-loader": "^0.28.7",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9"
  },
  "devDependencies": {
    "webpack": "^3.5.2"
  }
}

4.3 创建 webpack.config.js 配置文件。PS:一定要知道下面每个节点的用途,下面给出的配置是最基础的配置

var path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, './wwwroot'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, './src')
        }
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                sourceMap: true,
                loaders: {
                    scss: 'style-loader!css-loader!sass-loader',
                    sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
                },
            }
        },
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        {
            test: /\.less/,
            loader: 'style!css!autoprefixer!less'
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader'
        },
        ]
    },
    devtool: '#source-map'
}

5.Demo

5.1 将vue官方提供的demo中src文件夹拷贝到项目中

5.2 运行 webpack -w命令 编译并且监控vue文件

5.3 F5运行项目

6.常用命令

  • webpack 编译
  • webpack -p 线上发布打包
  • webpack -w 编辑并且监控文件变化

7.demo下载

https://github.com/fqybzhangji/AspNetCore.VueJs.Template

AspNetCore MVC + Vue.Js 项目搭建的更多相关文章

  1. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  2. vue-cli脚手架搭建Vue.js项目

    前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g   PS:-g 就是 ...

  3. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  4. Vue.js项目的开发环境搭建与运行

    写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...

  5. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  6. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  7. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  8. VUE 脚手架项目搭建

    1. 概述 1.1 说明 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目.GitHub地址是:https://github.com/vuejs/vue-c ...

  9. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

随机推荐

  1. 在 uniGUI 中实现自动弹窗后延迟几秒关闭 — Toast 功能

    在 uniGUI 中实现自动弹窗后延迟几秒关闭 — Toast 功能. uniGUI 的客户端使用 EXTJS 6 ,本就有 Toast 功能. 但UniGui 官方没有相应的控件,我们如何使用 EX ...

  2. html单选按钮用jQuery中prop()方法设置

    模拟单选按钮时用jQuery,prop方法来设置. 赋默认选中值:$("#" + id).find("input:radio[value='" + state ...

  3. 一道并查集的(坑)题:关闭农场closing the farm

    题目描述 in English: Farmer John and his cows are planning to leave town for a long vacation, and so FJ ...

  4. 专题:DP杂题1

    A POJ 1018 Communication System B POJ 1050 To the Max C POJ 1083 Moving Tables D POJ 1125 Stockbroke ...

  5. ThreadLocal与Synchronized区别

    ThreadLocal和Synchonized都用于解决多线程并发访问他们两者的区别:synchronized是利用锁的机制,使变量或代码块在某一时该只能被一个线程访问,而ThreadLocal为每一 ...

  6. sqlserver 导出数据

    背景 一看到这个标题,还有这个内容,感觉当初记录这个知识点真是记录的太简单了.不过通过这个知识点我还真想起了当初的一些事情.写的题外话可能更有意思,希望每篇文章我都能加个当时的题外记录.当时一直搞or ...

  7. queue之#单向消息队列

    import queue q = queue.Queue() #创建一个单项队列qsize 查看这个单项队列元素的个数empty 与 clear功能是一样的full 是用来查看这个队列是否填满了,队列 ...

  8. golang esl api

    通过ESL 调取FS的状态,比如show calls : 用golang  eventsocket 实现 conn, err := eventsocket.Dial("192.168.5.3 ...

  9. swift 实践- 14 -- UIScrollView

    import UIKit class ViewController: UIViewController ,UIScrollViewDelegate{ override func viewDidLoad ...

  10. STM32L476应用开发之二:模拟量数据采集

    采集模拟量数据在一台一起中是必不可少的功能.在本次实验中我们要采集的模拟量值主要包括氧气传感器的输出以及压力变送器的输出. 1硬件设计 我们需要采集数据对精度有一定的要求,而STM32L476自带AD ...