zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    怎样快速学会ZBrush 中的移动笔刷的运用
    ZBrush中如何才能快速完成脸部雕刻（下）
    ZBrush中如何才能快速完成脸部雕刻（上）
    ZBrush中的Clip剪切笔刷怎么快速运用
    ZBrush中必须记住的常用快捷键
    怎么在ZBrush中渲染漫画风格的插画
    怎么运用ZBrush中的Z球制作身体部分
    ZBrush中的笔刷该怎样制作
    如何在ZBrush中添加毛发
    App交互demo
  • 原文地址：https://www.cnblogs.com/hellman/p/8461043.html
Copyright © 2011-2022 走看看