js上传文件到tomcat服务器,Vue.js的基本使用到发布到tomcat服务器

Vue.js是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js的安装和发布到本地# 最新稳定版

npm install vue

# 全局安装

vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

vue init webpack my-project

# 安装依赖,走你

cd my-project

npm run dev

完成了上述操作,一个基本的Vu e.js项目就创建好了.项目发布到本地后,访问locolhost可以看到helloworld页面.如下图所示

58352b5e7aba?from=singlemessage

初始化页面

看到了上述页面,一个Vue.js的项目就已经发布好了.

Vue.js的使用介绍以及发布到tomcat

我使用的Atom编译器,很方便推荐!

1、创建新文件

在src下的components目录下,创建一个first.vue文件

文件的内容大概分为3部分,以我(初学者)目前的了解

这里写html文本 {{message}}

这里写Vue的内容

export defaultlt {

name : 'first',

data(){

return {

message:"这里填写对应的模型数据".

}

}

}

//这里写样式

.body{

fontSize : 14px;

}

2、导入Vue

特别说明一点的是,本身书写的Vue文件导入会报错,所以直接导入到index.html里边了,有明白的兄弟,请留言指导.

3、配置路由表router

src下的router文件下的index.js文件.

头部导入Vue文件.import first from '@/components/first'

配置路由routes: [

{

path: '/',

component:first

}

Ap.vue文件会访问路由表获取指向根目录的vue文件

4、官方各种demo

这里就不写各种代码了,请访问官方文档,或者github上,拉去优质的项目.

5、打包发布

重点说的是,打包发布前,一定要注意修改config下的index.js文件.

我们找到这个文件下的build.

下边有一些配置项,index(启动页),assetsRoot(根路径),assetsSubDirectory(打包文件路径),assetsPublicPath(生产访问路径),ps:名字都是瞎编的.

打瞌睡的看好了,接下来要划重点了!assetsPublicPath默认是"/",除非你把dist里边的内容拷贝到你的服务器上,否则,这里一定要注明生产路径.假设我的生产服务器tomcat的webapps下创建一个demo的文件夹.把整个dist文件全部丢到demo下边.那么这里的路径就是'/demo/dist/'才能保证生产服务器正常访问.

最后我们用终端进入到项目文件夹下,执行打包命令npm run build

最后我们把dist文件打包发到tomcat服务器下,解压到demo文件夹里.正常访问,下边是访问地址.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值