1. webpack+vue+vueRouter模組化構建完整專案例項詳細步驟-入門篇
新建專案
開始（確認已經安裝node環境和npm包管理工具）
1、新建專案檔名為start_vuedemo
2、npm init -y 初始化專案，我的win7系統，工程在d盤的vue_test_project資料夾下的名為start_vuedemo的工程資料夾
如圖所示：
在該工程下自動生成一個package.json檔案。
安裝專案依賴
3、npm install --save vue 預設安裝最新版vue
4、npm install --save-dev webpack webpack-dev-server 安裝webpack，webpack-dev-server（是一個小型的Node.js Express伺服器）
注：npm install 在安裝 npm 包時，有兩種命令引數可以把它們的資訊寫入 package.json 檔案，一個是npm install --save另一個是 npm install --save-dev，他們表面上的區別是--save 會把依賴包名稱新增到 package.json 檔案 dependencies 鍵下，--save-dev 則新增到 package.json 檔案 devDependencies 鍵下，
--save-dev 是你開發時候依賴的東西，--save 是你釋出之後還依賴的東西。
如下所示，在package.json檔案中：
"dependencies": {
5、npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，babel的作用是將es6的語法編譯成瀏覽器認識的語法es5
這時，package.json部分增加程式碼如下：
"dependencies": {
"vue": "^2.4.2"
},
"devDependencies" 6、npm install --save-dev vue-loader vue-template-compiler 用來解析vue的元件，.vue字尾的檔案
注意: vue-loader最好用^14.0.3 版本. 否則後面會有個報錯
7、npm install --save-dev css-loader style-loader 用來解析css
拓展：css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(…)的方法實現 require()的功能,style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。
8、npm install --save-dev url-loader file-loader 用於打包檔案和圖片
9、npm install --save-dev sass-loader node-sass 用於編譯sass
10、npm install --save-dev vue-router 安裝路由
11、npm install -D webpack-cli
原文缺少第11步, 導致最後 npm run server的時候報錯: Cannot find module 'webpack/bin/config-yargs'
編輯專案目錄以及新增程式碼
專案結構
如圖所示：
結構說明：
dist檔案是後面執行webpack指令生產的，不用管；
webpack.config.js 配置檔案，本身也是一個標準的Commonjs規範的模組；
routes.js檔案放路由配置檔案；
index.html首頁入口檔案
App.vue是專案入口檔案。
main.js這是專案的核心檔案。全域性的配置都在這個檔案裡面配置。
commponents目錄裡面放了公共元件header檔案。
views檔案放詳情頁面；
webpack.config.js
在專案根路徑下新建webpack.config.js 配置檔案，本身也是一個標準的Commonjs規範的模組；
- 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
- })
- ])
- }
解釋：
test：一個匹配loaders所處理的檔案的拓展名的正則表示式（必須） 。
loader：loader的名稱（必須） 。
include/exclude:手動新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾）（可選）。
routes.js
下面的內容沒有特殊說明，都是在根路徑下新建的一個src資料夾，然後內容放置於src資料夾下面。
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
在根目錄下新建一個index.html,這個index.html也即是首頁入口檔案，程式碼如下：
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="appIndex">
</div>
<script src="./dist/build.js"></script>
</body>
</html>說明下：引用的這個js是通過webpack指令生成的dist/build.js檔案。這兒先引用吧
App.vue
在新建專案入口檔案App.vue，當然也是在src資料夾下，程式碼如下：
<!--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="scss">
$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>main.js
- //