一、前提

1. 安装了node.js。

2. 安装了npm。

3. 检查是否安装成功：

打开cmd，输入node，没有报“node不是内部或外部命令”表示安装成功node.js。

打开cmd，输入npm，没有报“npm不是内部或外部命令”表示安装成功node.js。

4. node.js下载地址：http://pan.baidu.com/s/1eRW4hiU。用这个安装包安装会默认帮你安装npm。

注意：由于webpack是一个基于node的项目，所以必须安装node.js和npm

二、创建项目目录

1. 在C盘目录下面创建文件夹：firstvue（注意不能有大写字母）。然后打开cmd，进入firstvue目录。

可见当前是一个空目录。

2. 新建文件，改名为package.json。然后输入如下内容，再执行命令：npm install。

[html] view
plain copy

{
"name": "firstvue",
"version": "1.0.0",
"description": "vue+webapck",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
"dependencies": {
"vue": "^1.0.18",
"vue-router": "^0.7.13"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"css-loader": "^0.16.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
},
"author": "xiaoming",
"license": "MIT",
"keywords": [
"vue",
"webpack"
]
}

您唯一需要修改的是项目name和作者author。
安装成功可以看到当前目录结构如下：（其中node_modules是自动生成的）

3. 新建文件，改名为：webpack.config.js。这个是我们的webpack配置文件，输入内容：

[html] view
plain copy

var path = require('path');
// NodeJS中的Path对象，用于处理目录的对象，提高开发效率。
// 模块导入
module.exports = {
// 入口文件地址，不需要写完，会自动查找
entry: './src/main',
// 输出
output: {
path: path.join(__dirname, './dist'),
// 文件地址，使用绝对路径形式
filename: '[name].js',
//[name]这里是webpack提供的根据路口文件自动生成的名字
publicPath: '/dist/'
// 公共文件生成的地址
},
// 服务器配置相关，自动刷新!
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true,
},
// 加载器
module: {
// 加载器
loaders: [
// 解析.vue文件
{ test: /\.vue$/, loader: 'vue' },
// 转化ES6的语法
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
// 编译css并自动添加css前缀
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
//.scss 文件想要编译，scss就需要这些东西！来编译处理
//install css-loader style-loader sass-loader node-sass --save-dev
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
// 图片转化，小于8K自动转化为base64的编码
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
//html模板编译？
{ test: /\.(html|tpl)$/, loader: 'html-loader' },
]
},
// .vue的配置。需要单独出来配置，其实没什么必要--因为我删了也没保错，不过这里就留这把，因为官网文档里是可以有单独的配置的。
vue: {
loaders: {
css: 'style!css!autoprefixer',
}
},
// 转化成es5的语法
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extensions: ['', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
},
// 开启source-map，webpack有多种source-map，在官网文档可以查到
devtool: 'eval-source-map'
};

您只需要复制上面内容即可，不要修改任何文件。此时项目目录如下：

4. 新建文件，改名为：index.html。输入如下内容：

[html] view
plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack vue</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<a v-link="{ path: '/login' }">登录界面 </a>
<a v-link="{ path: '/register' }">注册界面</a>
</p>
<router-view></router-view>
</div>
<script src="dist/main.js"></script>
</body>
</html>

5. 新建一个空目录，改名为：dist。不用管它。项目会自动引用

6. 新建一个目录，改名为：src。然后在src目录下新建一个文件，改名为：main.js。内容如下：

[html] view
plain copy

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
var App = Vue.extend({})
var router = new VueRouter()
router.map({
'/login': {
component: function (resolve) {
require(['./components/login.vue'], resolve)
}
},
'/register': {
component: function (resolve) {
require(['./components/register.vue'], resolve)
}
}
})
router.start(App, '#app')

7. 在src文件夹下建立目录，改名为：components。然后进入components，新建文件：login.vue和register.vue。内容如下：

[html] view
plain copy

<template>
<div class="head">
<input type = "text" value = "{{ title }}"></input>
<input type = "submit" v-on:click="golist()" ></input>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
title: "这是登录界面"
}
},
methods :{
golist () {//方法，定义路由跳转，注意这里必须使用this，不然报错
this.$route.router.go({path:"/register"});
}
}
}
</script>

[html] view
plain copy

<template>
<div class="head">
<h1>{{ title }}</h1>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
title: "这里是注册界面"
}
}
}
</script>

此时目录结构如下图：

至此，目录结构创建完毕。

三、运行npm start

1. 只要运行npm start，运行成功就大功告成了。如图：

2. 成功的话会出现下图：

3. 打开浏览器，输入：http://127.0.0.1:8080，即可看到如下图：

点击登录会出现如下图：

四、注意

1. 如果端口8080被占用，npm start的时候会报错的，这个时候只要把占用8080端口的进程关闭即可。

您也可以修改端口，输入：webpack-dev-server --port 9090。即可修改端口号

2. vue参考资料：

http://cn.vuejs.org/guide/syntax.html

3. 我的项目资源地址：

http://pan.baidu.com/s/1c27fWC4

Vue.js结合vue-router和webpack编写单页路由项目的更多相关文章

vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...
js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
vue.js学习之如何在手机上查看vue-cli构建的项目
vue.js学习之如何在手机上查看vue-cli构建的项目一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目二:输入ip和端口号打开项目 ...
解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部在我们写路 ...
vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
学习Vue.js之vue移动端框架到底哪家强
官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...
Vue.js 学习笔记第6章表单与v-model
本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法表单控件在实际业 ...
Vue.js 入门 --- vue.js 安装
本博文转载 https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...

随机推荐

php的2种域名转向写法
第一种 echo '<meta http-equiv="Refresh" content="0;url=' . $url . '">' ; 第二种 ...
近几年ACM/ICPC区域赛铜牌题
2013 changsha zoj 3726 3728 3736 3735 2013 chengdu hud 4786 4788 4790 2013 hangzhou hdu 4770 4771 47 ...
牛客被3整除的子序列dp
题意很清楚,直接dp即可,dp[i][j]表示到第i个字符的状态为j的方案数,这里状态指的是子序列最大下标到第i直接dp即可,dp[i][j]表示到第i个字符的状态为j的方案数,这里状态指的是子序列最 ...
阿里云三台CentOS7.2配置安装CDH5.12
1 购买3台阿里云服务 2 配置好ssh连接客户端根据自己情况连接 3 安装好MySQL5.7 跳过,见之前博客安装在hadoop001上 4 设置好Hosts文件 3台机器同时操作 vim /e ...
vue之简单的todoList（一）
  <template> <div id="app" ...
使用Protobuf定义网络协议
准备工具: 工具下载地址如下:https://github.com/protocolbuffers/protobuf/releases/tag/v3.6.1,主要使用到的文件有: protoc.exe ...
5-4日 socket套接字
1,socket定义 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面 ...
Failed to read artifact ......明明之前可以的
Type One or more constraints have not been satisfied. mybaits Failed to read artifact ....jar 右键proj ...
const关键字的作用
1.防止被修饰的成员的内容被改变. 2.修饰类的成员函数时,表示其为一个常函数,意味着成员函数将不能修改类成员变量的值. 3.在函数声明时修饰参数,表示在函数访问时参数(包括指针和实参)的值不会发生变 ...
linux 服务器下的基本操作
1.SSH 上传: scp /path/file(这部分为本地的路径) user(远端目标用户名)@host(远端目标IP):/pathorfile(文件存储路径) 下载: scp user(远端用户 ...

Vue.js结合vue-router和webpack编写单页路由项目

一、前提

二、创建项目目录

三、运行npm start

四、注意

Vue.js结合vue-router和webpack编写单页路由项目的更多相关文章

随机推荐

热门专题