一项目创建

1,搭建vue-cli脚手架(依赖npm)

没有安装npm的同学,请先使用npm install -g vue-cli ,然后再进行这一步

安装的过程中有几项

? Project name p1        //项目名
? Project description 1   //描述
? Author jimsfriend          //作者
? Vue build standalone
? Install vue-router? Yes   //是否使用路由(请选择Yes)
? Use ESLint to lint your code? No  //这里是是否使用严格模式,一定要选否,不要问我为什么,严格模式很痛苦!
? Set up unit tests No            //这里随便
? Setup e2e tests with Nightwatch? No       //这里随便

然后就是下载依赖包,得等会儿

二 项目结构

1,build:webpack配置文件,可以不用动

2,config,配置文件

dev.env.js看名字叫生产环境.js,没啥重要的用途,可以不用关注

这个也是

比较重要的是config/index.js文件

var path = require('path')

module.exports = {
build: { // production 环境
env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
assetsSubDirectory: 'static', // 编译输出的二级目录
assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
productionSourceMap: true, // 是否开启 cssSourceMap
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // 是否开启 gzip
productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
},
dev: { // dev 环境
env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
port: 8080, // 运行测试页面的端口
assetsSubDirectory: 'static', // 编译输出的二级目录
assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域)
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false // 是否开启 cssSourceMap
}
}

  

 这段代码是抄了园友,更加详细的原文地址    https://www.cnblogs.com/whkl-m/p/6627864.html

 3,dist: 编译后的打包文件默认是没有的,

项目编译打包:

cmd 到project1目录,运行:npm run build ,然后对多出来一个dist文件,这个dist文件就是编译后的项目,发布的时候只需把dist放在 web宿主 (如 IIS)上即可

 4,mode_modules,node模块,就是一些依赖包,

5 ,src,主要编写代码文件,后面会单独介绍

6,static,也是静态文件存放文件

7,剩下的都是写不怎么重要的,省略了。

二 项目运行,进入project1 目录  在cmd中运行 npm run dev  回车即可

然后就运行起来,访问  http://localhost:8080/ 

三 安装iview,

也是project1目录下,运行 npm install iview --save

装好之后基本上依赖项和环境就Ok,然后就开干了

Iview的文档地址    http://v1.iviewui.com/docs/guide/install,一定要注意版本,不同的版本api不同

先了解一下src的项目结构

assets,放一些静态文件,比如图片图标啥的

components , 存放组件 ,理解为抽取出来的一些公共的自定义组件

js,这个是我自己新建的文件夹放一些公共的js文件比如 用axios粉装的Http请求 , 常用的工具类等等

router ,里面有一个index.js 文件,是路由文件 。就像ASPNET MVC 中的路由表,只不过他是显式的定义出来,而mvc中默认使用ctroller前缀和action名作为路由。

views文件夹,放主要的页面,代码量最多的地方

App.vue,入口的组件

main.js入口文件

清楚之后,我们来写一个登录页

先搞一个_layout文件放布局页,是不是和mvc里面的_layout很像?没错他们都是一个意思

这里的<router-view></router-view> 和mvc中的RendBody()是一个意思

然后搞 account文件夹,来放登陆注册这种页面 ,搞一个login.vue文件,就是登录页了

搞完之后就去访问 /account/login,你会发现啥都没有,因为还没有再router/index.js里面定义

,定义一个 account_login ,名字随便起 from后面是文件夹的路径

,下面的path是在浏览器中访问的地址

再次访问,已经有了

,写不动了,今天先写这么多,下一节写路由的使用

Aspnet Mvc 前后端分离项目手记(四)vue项目的搭建(一)(iview)的更多相关文章

  1. Aspnet Mvc 前后端分离项目手记(二)关于token认证

    在前后端分离的项目中,首先我们要解决的问题就是身份认证 以往的时候,我们使用cookie+session,或者只用cookie来保持会话. 一,先来复习一下cookie和session 首先我们来复习 ...

  2. Aspnet Mvc 前后端分离项目手记(三)关于restful 风格Url设计

    RESTful 不是新东西,简单理解它的核心思想就是最大程度的利用http协议的一些特点,比如uri,比如请求动词,在前后端分离的项目中会有大大的好处 ,好的设计的url简单明了,胜过详细的说明文档. ...

  3. Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)

    前言,最近的项目使用前后端分离的模式,记录其中一些知识点.经过这个项目,也对前后端分离有了更多理解,尤其是在技术之外的方面. 越来越多的项目采用前后端分离的原因,有两点:      1,技术方面的原因 ...

  4. 前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)

    开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...

  5. 使用REST风格完成MVC前后端分离

    一个具有REST风格项目的基本特征: 具有统一响应结构 前后台数据流转机制(HTTP消息与Java对象的互相转化机制) 统一的异常处理机制 参数验证机制 Cors跨域请求机制 鉴权机制 一:统一响应结 ...

  6. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(2)

    1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...

  7. 从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言

    缘起 作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...

  8. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(1)

    1.开发环境配置 Windows7 64位旗舰版 python3.6 node.js mysql navicat pycharm webstorm或vscode 2.项目初始化 新版的pycharm很 ...

  9. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(3)

    1.drf前期准备 1.django-rest-framework官方文档 https://www.django-rest-framework.org/ #直接百度找到的djangorestframe ...

随机推荐

  1. OSGEarth环境搭建

    1.下载OsgEaarth2.8源码 https://codeload.github.com/gwaldron/osgearth/legacy.zip/osgearth-2.8 2.下载perl 编译 ...

  2. 基于python实现的三方组件----Celery

    一.基于python实现的三方组件----Celery 1.作用 用于异步周期任务的处理 2.Celery的组成 (1)任务 app (2)记录任务的缓存(通常用redis或rabbitMQ) 任务记 ...

  3. VS Code真机测试步骤

    VS Code真机测试步骤 前提:你的电脑跟你的手机是在同一个网络环境下.电脑连手机热点: 1. 在扩展里搜索live server,下载安装: 2. 打开cmd 命令窗口(快捷键是win+r): 输 ...

  4. C语言实现常用数据结构——二叉树

    #include<stdio.h> #include<stdlib.h> #define SIZE 10 typedef struct Tree { int data; str ...

  5. 区块狗开发可以做出APP吗

    区块狗系统开发林生▉l8l加4896微9698电同步▉,区块狗奖励系统开发,区块狗平台系统开发,区块狗系统开发软件,区块狗系统开发案例,区块狗源码系统开发. 本公司是软件开发公司,华登区块狗/十二生肖 ...

  6. 精通并发与 Netty (一)如何使用

    精通并发与 Netty Netty 是一个异步的,事件驱动的网络通信框架,用于高性能的基于协议的客户端和服务端的开发. 异步指的是会立即返回,并不知道到底发送过去没有,成功没有,一般都会使用监听器来监 ...

  7. java开发工具必备神器——Notepad++和jd-gui下载安装使用

    Notepad++是 Windows操作系统下的一套文本编辑器,有完整的中文化接口及支持多国语言编写的功能(UTF8技术).除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码.Note ...

  8. Mac和Windows以及Linux上WingIDE Pro激活

    写这篇文章的原因,主要是网上的很多激活方式都不适用最新版的软件.要么要你付费下载别人破解好的内容,要么各种文章你抄我,我抄你,根本没有自己实践过. 本篇文章合适Mac.Windows.Linux平台, ...

  9. 小白开学Asp.Net Core 《五》

    小白开学Asp.Net Core<五>                               —— 使用.Net Core MVC Filter 一.简介 今天在项目(https:/ ...

  10. Kibana 7.1.1 安装及简单使用

    1. 下载 & 解压 # 下载 wget https://artifacts.elastic.co/downloads/kibana/kibana-7.1.1-linux-x86_64.tar ...