Aspnet Mvc 前后端分离项目手记(四)vue项目的搭建(一)(iview) - 小小爵 - 博客园

来源: Aspnet Mvc 前后端分离项目手记(四)vue项目的搭建(一)(iview) – 小小爵 – 博客园

一项目创建

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文件

 

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
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是在浏览器中访问的地址

再次访问,已经有了

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

 

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏