Vue-cli+router+webpack

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