webpack+vue+vueRouter模塊化構建小demo實例超詳細步驟（附截圖、代碼、入門篇）

時間 2019-11-18

標籤 webpack+vue+vuerouter webpack vue vuerouter 模塊化構建 demo 實例詳細步驟截圖代碼入門简体版

原文原文鏈接

說明：本demo使用yarn代替npm指令來下載一系列依賴，有詳細指令說明；使用WebStorm下Terminal來輸入指令；javascript

>開始（確認已經安裝node環境和yarn包管理工具）css

一、新建項目文件名爲vuedemohtml

二、yarn add init 初始化項目vue

>安裝項目依賴java

三、yarn add vue 安裝最新版vuenode

四、yarn add webpack webpack-dev-server 安裝webpack，webpack-dev-server（是一個小型的Node.js Express服務器）webpack

*拓展：npm install 在安裝 npm 包時，有兩種命令參數能夠把它們的信息寫入 package.json 文件，一個是npm install --save另外一個是 npm install --save-dev，他們表面上的區別是--save 會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，--save-dev 則添加到 package.json 文件 devDependencies 鍵下，
--save-dev 是你開發時候依賴的東西，--save 是你發佈以後還依賴的東西。*es6

五、yarn add babel babel-core babel-loader babel-preset-es2015 安裝babel，babel的做用是將es6的語法編譯成瀏覽器認識的語法es5web

六、yarn add vue-loader vue-template-compiler 用來解析vue的組件，.vue後綴的文件正則表達式

七、yarn add css-loader style-loader 用來解析css

拓展：css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(…)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

八、yarn add url-loader file-loader 用於打包文件和圖片

九、yarn add sass-loader node-sass 用於編譯sass

十、yarn add vue-router 安裝路由

>編輯項目目錄以及添加代碼

十一、文件目錄以下；

//dist文件是後面執行webpack指令生產的，不用管；

//webpack.config.js 配置文件，自己也是一個標準的Commonjs規範的模塊；

//routes.js文件放路由配置文件；

//index.html首頁入口文件

//App.vue是項目入口文件。

//main.js這是項目的核心文件。全局的配置都在這個文件裏面配置。

//commponents目錄裏面放了公共組件header文件。

//views文件放詳情頁面；

>代碼
//webpack.config.js
*註釋：
test：一個匹配loaders所處理的文件的拓展名的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；*

var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js',//值能夠是字符串、數組或對象 output: { path: path.resolve(__dirname, './dist'),//Webpack結果存儲 publicPath: '/dist/',//懵懂，懵逼，//然而「publicPath」項則被許多Webpack的插件用於在生產模式和開發模式下下更新內嵌到css、html，img文件裏的url值 filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } //本身加的 , { test: /\.css$/, loader: "style-loader!css-loader" } , { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader!" } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: {//webpack-dev-server配置 historyApiFallback: true,//不跳轉 noInfo: true, inline: true//實時刷新 }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

//routes.js

// 引用模板 import Vue from 'vue'; import Router from 'vue-router'; import indexPage from './components/header.vue' import homePage from './views/home.vue' import aboutPage from './views/about.vue' Vue.use(Router) export default new Router({ routes:[ { path:'/', component:homePage }, { path:'/about', component:aboutPage } ] })

//index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="appIndex"> </div> <script src="./dist/build.js"></script> </body> </html>

//App.vue

<!--App.vue是項目入口文件。--> <template> <div id="app"> <header-tab></header-tab> <h2>{{msg}}</h2> <div class="nav-box"> <p class="nav-list"> <router-link class="nav-item" to="/">首頁</router-link> <router-link class="nav-item" to="/about">關於</router-link> </p> </div> <div> <router-view></router-view> </div> </div> </template> <script> import HeaderTab from './components/header.vue'; export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, components:{ HeaderTab } } </script> <style lang="sass">
//sass編譯正常

$redColor: #f00
h2
    color: $redColor
#app
    text-align: center
    color: #2c3e50
    margin-top: 60px
h1, h2
    font-weight: normal

ul
    list-style-type: none
    padding: 0
li
    text-align: left
    margin: 0 10px
a
    color: #42b983

</style>

上面註釋的這裏sass編譯正常若是使用/* */註釋會報錯，由於會被編譯，使用// 就不會，由於不會被編譯。

//main.js

//main.js這是項目的核心文件。全局的配置都在這個文件裏面配置 import Vue from 'vue' import App from './App.vue' import router from './routes.js' import './assets/styles/base.css' //import './assets/sass/reset.sass'//報錯暫時不用sass Vue.config.debug = true;//開啓錯誤提示 new Vue({ router, el: '#appIndex', render: h => h(App) })

//commponents

//header.vue

<template> <div> <h1>共同header</h1> <img src="../assets/imgs/logo.png"> </div> </template>

注意：別忘了添加圖片

//views文件放詳情頁面

//about.vue

　<template>

 <div>about</div> </template>

//home.vue

<template> <div> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> <button @click="eClick()">事件</button> </div> </template> <script> export default { name: 'indexP', data () { return { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }, methods:{ eClick(){ console.log(9999); } } } </script>

//base.css

h1{ color: #999; }

//reset.sass

//$redColor:#f00
//h2
//  color:$redColor

>項目跑起來

執行指令webpack：

執行yarn run start跑項目，此時注意（不使用webpack-dev-server命令來跑項目，是由於我並無全局安裝webpack-dev-server），

還須要手動在package.json 文件添加代碼："start": "webpack-dev-server --open"，以下圖：

瀏覽器自動打開生成的連接：如我這裏是http://localhost:8080

首頁詳情頁效果：

關於詳情頁效果：

ok，但願小夥伴們能夠一次跑通項目流程

遇到的問題：

一、外部引入.sass文件報錯，<style lang="sass"></style>裏面的sass語法編譯正常；（上面我屏蔽了sass）

參考自原文連接：http://www.javashuo.com/article/p-webzqhgh-ep.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。