一、前提

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. Oracle 数据库监听配置和服务

    -- 补充说明 如果要远程连接192.168.10.44上的oracle,那么192.168.10.44服务器必须启动TNSListener.(配置文件 listener.ora) PLSQL Dev ...

  2. python序列化

    一. 序列化 1 定义: 在我们存储数据或者⽹网络传输数据的时候. 需要对我们的对象进⾏行行处理理. 把对象处理理成 ⽅方便便存储和传输的数据格式. 这个过程叫序列列化. 不同的序列列化, 结果也不同 ...

  3. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

  4. 表单相关标签之textarea，select

    textarea <textarea rows="3" cols="20"> 在w3school,你可以找到你所需要的所有的网站建设教程. < ...

  5. Django REST framework 第四章 Authentication

    到目前为止,撰写的API没有任何限制关于谁能更新.删除snippet. 我们更想要一些高级行为来确保: 1.代码段总是跟创建者有关联 2.只要认证通过的用户才能创建 3.只有创建者有权限更新或者删除 ...

  6. Springboot/cloud 项目突然出现许多Failed to read artifact descriptor, 或者无法解析

    由于jar 包冲突,还是什么原因引起 在仓库下即:.m2 下面执行以下命令(cmd) for /r %i in (*.lastUpdated) do del %i 然后对项目用maven update ...

  7. Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》

    官方文档:http://vuejs.org/v2/guide/syntax.html 中文文档: https://cn.vuejs.org/v2/guide/syntax.html https://g ...

  8. Applet、Scriptlet与Servlet

    Applet.Scriptlet与Servlet - 青春念邵的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/mo_fan_qing_wa/article/deta ...

  9. Java-Servlet -Helloworld

    Servlet 简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向浏 ...

  10. linux中的shell编程----基础

    1,运行shell脚本有两种办法一般有两种: 先给可执行权限,再进入文件所在的目录,输入:./name.sh: 运行解释器再执行脚本:/bin/sh name.sh,这种情况下,脚本中可以没有#!/b ...