Vue-cli+router+webpack
一、 安装nodejs
1) nodejs官网https://nodejs.org/en/download/,下载安装包,傻瓜式安装即可
2) 使用Windows+R键输入cmd打开命令窗口,使用node -v指令检查node版本,需要保证安装了4.0版本以上的nodeJS环境。不推荐使用版本7
二、 安装vue-cli,脚手架工具
1) 第一步全局安装vue-cli。
方式一:使用指令npminstall -g vue-cli,由于npm真的很慢。如果发现在一个地方长期卡着不动,可以ctrl+c取消,然后再重新执行
方式二:安装淘宝镜像(推荐使用),使用指令
npm install -g cnpm--registry=https://registry.npm.taobao.org
2) 安装webpack
cnpminstall webpack –g
3) 安装vue脚手架
npm installvue-cli –g
4) 在硬盘上找一个文件夹放工程使用,在终端进入该目录
cd 目录路径
5) 根据模板创建项目
vue init webpack-simple 工程名字<工程名字不能用中文>
会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n)
直接回车默认(然后会下载 vue2.0模板)
Project name (vue-test)
直接回车默认
Project description (A Vue.js project)
直接回车默认
Author
写你自己的名字
如下图所示我们的项目就已经建立完成
6) cd命令进入创建的工程目录
cd工程名字
7) 安装项目依赖
从官方仓库安装,npm 服务器在国外所以这一步安装速度会慢。
npm install
执行npminstall需要一点时间,因为会从服务器上下载代码之类的。并且在执行过程中会有一些警告信息。不用管,等着就是了。如果长时间没有响应,就ctrl+c停止 掉,然后再执行一次即可。把npm源换成国内的:cnpm install
安装完成后终端如图:
8) 安装Vue路由模块和网络请求模块
cnpminstall vue-router vue-resource –save
9) 打开项目此时的目录结构如下:
目录/文件 | 说明 |
build | 最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。 |
config | 配置目录,默认配置没有问题,所以不用管 |
node_modules | 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,我们也不用管 |
src | 开发目录,基本上绝大多数工作都是在这里开展的 |
static | 资源目录,可以把一些图片啊,字体啊,放在这里。 |
test | 初始测试目录,没有作用,删除即可 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。基本不用管 |
index.html | 首页入口文件,基本不用管,如果是开发移动端项目,可以在head区域加上你合适的meta头 |
package.json | 项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。 |
README.md | 不用管 |
其中最为主要的是src目录,目录初始结构如下:
commponents
目录里面放了一个演示的组件文件
App.vue
是项目入口文件
main.js
这是项目的核心文件。全局的配置都在这个文件里面配置
10) 运行项目
npm run dev
三、 示例Demo搭建
1) 在src文件夹下创建component文件夹存放组件文件
2) 打开 工程目录下的 App.vue
文件的结构为:template 写 html,script写 js,style写样式
注意事项:
(1) vue支持每一个模板里面写css,这样可以做到随用随取。
如果有单独的css文件, webpack 打包的时候无法识别并转换成 js,所以就需要配置才能读取 css 和字体文件,运行命令安装下面三个东西
cnpminstall style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev
在webpack.config.js文件中的 loaders 数组加入以下配置:
{
test:/\\\\\\\\.css$/,
loader:"style!css"
},
{
test:/\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader:"file"
}
(2) 一个组件下只能有一个并列的 div
(3) 数据要写在 return 里面
3) 在component中才创建一个firstcomponent.vue文件,仿照App.vue文件的结构写一个组件
4) 然后在 App.vue 使用组件 ( 因为在index.html里面定义了<div id="app"></div>所以就以这个组件作为主入口,方便 )
(1) 第一步引入
标签内的第一行写
importfirstcomponent from './component/firstcomponent.vue'
(2) 第二步注册
标签内的 data 代码块后面加上
components:{ firstcomponent }
(3) 第三步使用
<template></template>内加上
<firstcomponent></firstcomponent>
完成代码如下:
检查浏览器上的http://localhost:8080/ ,之前打开过页面会自动刷新
5) 使用路由搭建单页应用
(1) 前面通过cnpm install vue-router vue-resource –save命令安装了Vue路由模块和网络请求模块
(1) 在webpack.config.js加入别名
resolve: {
alias: {
vue :'vue/dist/vue.js'
}
},
(2) 再按之前的方法写一个组件 secondcomponent.vue
(3) 修改main.js引入并注册
修改完成后打开浏览器链接页面已经在<router-viewclass="view"></router-view>中渲染出来了,此时点击其中的某一个链接。上面的网址已经改变
6) 给页面加点动态数据,而每个应用基本上都会请求外部数据以动态改变页面内容。对应有一个库叫vue-resource帮我们解决这个问题。前面已经安装了。
(1) 如果没有安装,使用命令行安装
cnpminstall vue-resource –save
(2) 在 main.js 引入并注册vue-resource
importVueResource from 'vue-resource'Vue.use(VueResource);
(3) 我们在 secondcomponent.vue 上来动态加载数据添加一个列表:
<ul>
<li v-for="article inarticles">
{{article.title}}
</li>
</ul>
(4) 在 data 里面加入数组 articles 并赋值为[]
(5) 然后在 data 后面加入加入钩子函数mounted,这里使用的是豆瓣的公开 GET 接口,如果接口是跨域的 POST 请求,则需要在服务器端配置:
Access-Control-Allow-Origin: *
刷新页面效果如下:数据已成功加载
7) 使用webpack将项目进行打包,运行命令
npm runbuild
或:webpack --color –progress也可以直接打包
打包完成:
四、 将项目部署到Tomcat
1) 完成打包后到项目的文件夹中找到dist文件夹及项目入口文件index.html
2) 将两个文件拷贝至TomCat文件中的webapps文件夹中
3) 启动TomCat,打开浏览器输入http://localhost:8080/+项目文件名称访问页面
至此,关于vue-cli+webpack的小demo结束。
关于vue-router更多内容参考:
http://router.vuejs.org/zh-cn/essentials/getting-started.html