一、前提

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

 

  1. {
  2. "name": "firstvue",
  3. "version": "1.0.0",
  4. "description": "vue+webapck",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1",
  8. "start": "webpack-dev-server --inline"
  9. },
  10. "dependencies": {
  11. "vue": "^1.0.18",
  12. "vue-router": "^0.7.13"
  13. },
  14. "devDependencies": {
  15. "autoprefixer-loader": "^2.0.0",
  16. "babel": "^6.3.13",
  17. "babel-core": "^6.3.21",
  18. "babel-loader": "^6.2.0",
  19. "babel-plugin-transform-runtime": "^6.3.13",
  20. "babel-preset-es2015": "^6.3.13",
  21. "babel-runtime": "^5.8.34",
  22. "css-loader": "^0.16.0",
  23. "file-loader": "^0.8.5",
  24. "html-loader": "^0.3.0",
  25. "node-sass": "^3.4.2",
  26. "sass-loader": "^3.2.0",
  27. "style-loader": "^0.12.3",
  28. "url-loader": "^0.5.6",
  29. "vue-html-loader": "^1.2.0",
  30. "vue-loader": "^7.2.0",
  31. "webpack": "^1.12.0",
  32. "webpack-dev-server": "^1.14.0"
  33. },
  34. "author": "xiaoming",
  35. "license": "MIT",
  36. "keywords": [
  37. "vue",
  38. "webpack"
  39. ]
  40. }

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

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

[html] view
plain copy

 

  1. var path = require('path');
  2. // NodeJS中的Path对象，用于处理目录的对象，提高开发效率。
  3. // 模块导入
  4. module.exports = {
  5. // 入口文件地址，不需要写完，会自动查找
  6. entry: './src/main',
  7. // 输出
  8. output: {
  9. path: path.join(__dirname, './dist'),
  10. // 文件地址，使用绝对路径形式
  11. filename: '[name].js',
  12. //[name]这里是webpack提供的根据路口文件自动生成的名字
  13. publicPath: '/dist/'
  14. // 公共文件生成的地址
  15. },
  16. // 服务器配置相关，自动刷新!
  17. devServer: {
  18. historyApiFallback: true,
  19. hot: false,
  20. inline: true,
  21. grogress: true,
  22. },
  23. // 加载器
  24. module: {
  25. // 加载器
  26. loaders: [
  27. // 解析.vue文件
  28. { test: /\.vue$/, loader: 'vue' },
  29. // 转化ES6的语法
  30. { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
  31. // 编译css并自动添加css前缀
  32. { test: /\.css$/, loader: 'style!css!autoprefixer'},
  33. //.scss 文件想要编译，scss就需要这些东西！来编译处理
  34. //install css-loader style-loader sass-loader node-sass --save-dev
  35. { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
  36. // 图片转化，小于8K自动转化为base64的编码
  37. { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
  38. //html模板编译？
  39. { test: /\.(html|tpl)$/, loader: 'html-loader' },
  40. ]
  41. },
  42. // .vue的配置。需要单独出来配置，其实没什么必要--因为我删了也没保错，不过这里就留这把，因为官网文档里是可以有单独的配置的。
  43. vue: {
  44. loaders: {
  45. css: 'style!css!autoprefixer',
  46. }
  47. },
  48. // 转化成es5的语法
  49. babel: {
  50. presets: ['es2015'],
  51. plugins: ['transform-runtime']
  52. },
  53. resolve: {
  54. // require时省略的扩展名，如：require('module') 不需要module.js
  55. extensions: ['', '.js', '.vue'],
  56. // 别名，可以直接使用别名来代表设定的路径以及其他
  57. alias: {
  58. filter: path.join(__dirname, './src/filters'),
  59. components: path.join(__dirname, './src/components')
  60. }
  61. },
  62. // 开启source-map，webpack有多种source-map，在官网文档可以查到
  63. devtool: 'eval-source-map'
  64. };

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

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

[html] view
plain copy

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>webpack vue</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <h1>Hello App!</h1>
  10. <p>
  11. <a v-link="{ path: '/login' }">登录界面 </a>
  12. <a v-link="{ path: '/register' }">注册界面</a>
  13. </p>
  14. <router-view></router-view>
  15. </div>
  16. <script src="dist/main.js"></script>
  17. </body>
  18. </html>

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

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

[html] view
plain copy

 

  1. import Vue from "vue";
  2. import VueRouter from "vue-router";
  3. Vue.use(VueRouter);
  4. var App = Vue.extend({})
  5. var router = new VueRouter()
  6. router.map({
  7. '/login': {
  8. component: function (resolve) {
  9. require(['./components/login.vue'], resolve)
  10. }
  11. },
  12. '/register': {
  13. component: function (resolve) {
  14. require(['./components/register.vue'], resolve)
  15. }
  16. }
  17. })
  18. router.start(App, '#app')

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

login.vue

[html] view
plain copy

 

  1. <template>
  2. <div class="head">
  3. <input type = "text" value = "{{ title }}"></input>
  4. <input type = "submit" v-on:click="golist()" ></input>
  5. </div>
  6. </template>
  7. <script type="text/javascript">
  8. export default {
  9. data() {
  10. return {
  11. title: "这是登录界面"
  12. }
  13. },
  14. methods :{
  15. golist () {//方法，定义路由跳转，注意这里必须使用this，不然报错
  16. this.$route.router.go({path:"/register"});
  17. }
  18. }
  19. }
  20. </script>

register.vue

[html] view
plain copy

 

  1. <template>
  2. <div class="head">
  3. <h1>{{ title }}</h1>
  4. </div>
  5. </template>
  6. <script type="text/javascript">
  7. export default {
  8. data() {
  9. return {
  10. title: "这里是注册界面"
  11. }
  12. }
  13. }
  14. </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编写单页路由项目的更多相关文章

  1. vue-route+webpack部署单页路由项目，访问刷新出现404问题

    问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...

  2. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  3. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  4. vue.js学习之 如何在手机上查看vue-cli构建的项目

    vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...

  5. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  6. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  7. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

  8. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  9. Vue.js 入门 --- vue.js 安装

    本博文转载  https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...

随机推荐

  1. [C++]2-5 分数化小数

    /* 分数化小数 输入正整数a,b,c,输出a/b的小数形式.精确到小数点后C位.a,b<=10^6,c<=10^6. 输入包含多组数据,结束标记为a=b=c=0 样例输入: 1 6 4 ...

  2. webpack指定第三方模块的查找路径

    通常我们会使用一些地方模块在我们的项目中,比如bootstrap import 'bootstrap' 导入的bootstrap默认会查找当前目录的node_modules文件,但是如果这个文件没有, ...

  3. 推荐使用string

    C-string(char* const char*) basic_string<>特化版本:string charwstring wchar_tu16string char16_tu32 ...

  4. I - Magic FZU - 2280 （字符串hash）

    题目链接: I - Magic FZU - 2280 学习链接: FZU - 2280 I - Magic 题目大意: 给你nn个字符串,每个字符串有一个值ww,有qq次询问,一共两种操作:一是“1, ...

  5. python 三大框架之一Flask入门

    Flask轻量级框架,Flask是python中的轻量级框架. 打开终端 输入pip install Flask 命令 下载以及安装Flask框架 检查是否下载成功及能否使用 首先导入python环境 ...

  6. Linux下tar压缩解压缩命令详解

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  7. ListBox滚动条 刷新列表之后 指定位置(置顶或滚动到最后)

    参数ObservableCollection<T>类型 滚动条在最上 ListBox.ScrollIntoView(ListBoxOC[0]);滚动条在最下 ListBox.ScrollI ...

  8. Debian9 使用 Docker 安装 gitlab完整过程

    一. 安装Docker CE (参考 官网指南) 1. 卸载老版本 sudo apt-get remove docker docker-engine docker.io  2. Update the ...

  9. zookeeper安装教程

    zookeeper  一.单机安装 1.1 下载 1.2 安装 1.3 配置 1.4 启动和停止 二.伪集群模式 2.1 zookeeper1配置 2.2 zookeeper2配置 2.3 zooke ...

  10. Python备份MySQL数据库【转】

    #!/usr/bin/env python # coding: utf- import os import time ''' defined variable ''' databases=['hch' ...