AspNetCore MVC + Vue.Js 项目搭建

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下载

时间: 2024-10-08 03:57:35

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

vue.js项目搭建教程(参考)

第一步:安装node.js 1.传送门下载安装https://nodejs.org/en/ 2.打开cmd控制台分别查看node版本.path,npm node -v path npm -v 3.推荐淘宝镜像 npm config set registry https://registry.npm.taobao.org 4.安装全局vue-cli脚手架,并检查 cnpm install --global vue-cli vue -V 第二步:建立一个vue-test文件夹,并使用webpack模

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

写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装node.js(JavaScript运行环境runtime) 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以完成. 完成之后,开发命令行工具,输入 node -v 如果出现相应的版本号,则说明安装成功. 另外,npm是node.js下的包管理器,npm能很好的和诸如webp

vue.js项目构建基础

这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJs安装是否成功? nodeJs安装完成,自带npm,可以检查npm是否已经安装 安装webpack. webpack是一个模块加载器兼打包工具,在vue项目中,为了更好的管理代码使用模块系统,使用webpack打包. 安装webpack  查看webpack是否安装成功? 安装 vue-cli 脚手

如何创建vue.js项目和node.js项目?

一.搭建vue.js项目     1.先下载node.js  2.通过node.js的npm命令下载node.js的vue-cli(是一个基于 Vue.js 进行快速开发的完整系统) 1.使用阿里镜像下载vue-cli ( 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 再全局安装vue-cli npm install --global vue-cli ) 3.用vue-cli创建项目 1

vue.js项目构建之vue-router2.0的使用

vue-router2.0官方文档地址:http://router.vuejs.org/zh-cn/index.html 单页应用? 单页应用程序(SPA,single page web application). SPA其实就是整个网站只有一个页面,只改变页面的显示内容,不需要改变整个网页. vue.js 的单页面应用是基于路由和组件的.路由用于设定访问路径,并将路径和组件映射起来.页面内容切换这里就是组件的切换. vue-router是vue.js官方的路由插件,适合构建单页面应用. vue

如何把vue.js项目部署到服务器上

如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSourceMap: false 2-运行npm run build 然后在项目路径中找到打包后的文件,在项目文件的dist文件夹下面的static和index.html就是打包后的文件.然后我自己创建了cccBlog文件夹,把static和index.html拷贝到cccBlog下面,然后向服务器上传这个

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

vue.js环境搭建

vue最开始说是库,现在应该可以说是框架了,很多大公司都开始用vue了,这得源于vue的本质 1:数据化驱动,2:组件化模板.项目中用vue都得搭建环境,经过一段时间的摧残后终于有勇气来写篇关于vue环境搭建的博文了,我相信网上已经有很多前辈的博文能够帮助大家完成搭建,与我来说只是记录下自己搭建环境的一点心得,如若能够帮助到两三人,足以. 1:因为vue.js的运行是基于node.js的npm环境下,所以我们得先安装node.js,这个就不累赘了,网上下个node.js安装即可. 2:记得刚开始

MVC + Vue.js 初体验(实现表单操作)

Vuejs http://cn.vuejs.org/ Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. DEMO效果 前端源码 @{ Lay