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页面.如下图所示
初始化页面
看到了上述页面,一个Vue.js的项目就已经发布好了.
Vue.js的使用介绍以及发布到tomcat
我使用的Atom编译器,很方便推荐!
1、创建新文件
在src下的components目录下,创建一个first.vue文件
文件的内容大概分为3部分,以我(初学者)目前的了解
<template>
<div class="body">
这里写html文本 {{message}}
</div>
</template>
<script>
这里写Vue的内容
export defaultlt {
name : 'first',
data(){
return {
message:"这里填写对应的模型数据".
}
}
}
</script>
<style scoreped>
//这里写样式
.body{
fontSize : 14px;
}
</style>
2、导入Vue
特别说明一点的是,本身书写的Vue文件导入<script src="https://unpkg.com/vue"/>会报错,所以直接导入到index.html里边了,有明白的兄弟,请留言指导.
3、配置路由表router
src下的router文件下的index.js文件.
头部导入Vue文件.import first from '@/components/first'
配置路由
routes: [
{
path: '/',
component:first
}
Ap.vue文件会访问路由表<router-view/>获取指向根目录的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文件夹里.正常访问,下边是访问地址.
网友评论