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

时间:2021-09-28 17:58:02

一、前提

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目录。
Vue.js结合vue-router和webpack编写单页路由项目
可见当前是一个空目录。

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

[html] view
plain
 copy

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

  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. }

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

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

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

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

[html] view
plain
 copy

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

  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. };

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

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

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

[html] view
plain
 copy

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

  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

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

  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

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

  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

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

  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>

此时目录结构如下图:

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

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

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

三、运行npm start

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

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

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

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

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

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

点击登录会出现如下图:

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

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

四、注意

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