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

一、前提

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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  1. import Vue from "vue";  
  2. import VueRouter from "vue-router";  
  3. Vue.use(VueRouter);  
  4.   
  5.   
  6. var App = Vue.extend({})  
  7. var router = new VueRouter()  
  8. router.map({  
  9.     '/login': {  
  10.         component: function (resolve) {  
  11.           require(['./components/login.vue'], resolve)  
  12.         }  
  13.     },  
  14.     '/register': {  
  15.         component: function (resolve) {  
  16.           require(['./components/register.vue'], resolve)  
  17.         }  
  18.     }  
  19.       
  20. })  
  21.   
  22. router.start(App, '#app')  


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

 

login.vue

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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.   
  8. <script type="text/javascript">  
  9.   export default {  
  10.       data() {  
  11.         return {  
  12.           title: "这是登录界面"  
  13.         }  
  14.       },  
  15.       methods :{  
  16.           golist () {//方法，定义路由跳转，注意这里必须使用this，不然报错  
  17.               this.$route.router.go({path:"/register"});  
  18.           }  
  19.       }  
  20.   }  
  21. </script>  

register.vue

 

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <template>  
  2.   <div class="head">  
  3.     <h1>{{ title }}</h1>  
  4.   </div>  
  5. </template>  
  6.   
  7. <script type="text/javascript">  
  8.   export default {  
  9.     data() {  
  10.       return {  
  11.         title: "这里是注册界面"  
  12.       }  
  13.     }  
  14.   }  
  15. </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

posted @ 2018-02-23 10:25  对方屌丝正在输入中  阅读(1165)  评论(0)  编辑  收藏  举报