Vue.js結合vue-router和webpack編寫單頁路由項目

時間  2020-07-18
標籤 vue.js vue 結合 router webpack 編寫 單頁 路由 項目 欄目 JavaScript 简体版
原文   原文鏈接

1、前提

1. 安裝了node.js。javascript

2. 安裝了npm。css

3. 檢查是否安裝成功：html

打開cmd，輸入node，沒有報「node不是內部或外部命令」表示安裝成功node.js。vue

打開cmd，輸入npm，沒有報「npm不是內部或外部命令」表示安裝成功node.js。java

4. node.js下載地址：http://pan.baidu.com/s/1eRW4hiU。用這個安裝包安裝會默認幫你安裝npm。node

注意：因爲webpack是一個基於node的項目，因此必須安裝node.js和npm
webpack

2、建立項目目錄

1. 在C盤目錄下面建立文件夾：firstvue（注意不能有大寫字母）。而後打開cmd，進入firstvue目錄。

可見當前是一個空目錄。

2. 新建文件，更名爲package.json。而後輸入以下內容，再執行命令：npm install。web

 

[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配置文件，輸入內容：vue-router

 

[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。輸入以下內容：npm

 

[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>  

此時目錄結構以下圖：

 



至此，目錄結構建立完畢。


3、運行npm start

1. 只要運行npm start，運行成功就大功告成了。如圖：


2. 成功的話會出現下圖：


3. 打開瀏覽器，輸入：http://127.0.0.1:8080，便可看到以下圖：


點擊登陸會出現以下圖：

 



4、注意

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程