摘要：運(yùn)行環(huán)境是，其它版本的小小伙伴要注意版本兼容的問(wèn)題喔好了，首頁(yè)在創(chuàng)建項(xiàng)目目錄，下面進(jìn)行項(xiàng)目的第一步，搭建環(huán)境。附上代碼附上代碼路由控制和接下來(lái)就配置入口文件，和入口文件的模板了。

現(xiàn)在正在開(kāi)發(fā)一個(gè)公司的后臺(tái)管理項(xiàng)目，項(xiàng)目是一個(gè)單頁(yè)面應(yīng)用。功能上就是管理銷(xiāo)售訂單的各個(gè)環(huán)節(jié)，包括物流管理，回款管理，訂單管理等等的功能。這些就不多說(shuō)了。項(xiàng)目是，基于webpack3,vue2.2.6,element2.2.9。js語(yǔ)法是使用es6,還有使用到的一些資源比如，vue-router,vue-resource,webpack-dev-server等。運(yùn)行環(huán)境是node6.10.0,npm3.10.10，其它版本的小小伙伴要注意版本兼容的問(wèn)題喔！

好了，首頁(yè)在創(chuàng)建項(xiàng)目目錄（admin），下面進(jìn)行項(xiàng)目的第一步，搭建環(huán)境。搭建環(huán)境的第一步，就是創(chuàng)建package.json，我現(xiàn)在就是簡(jiǎn)單粗暴的創(chuàng)建發(fā)-從之前的項(xiàng)目拷貝一個(gè)這樣的文件，然后再改一下，代碼就是下面這樣。大家也可以$ npm init生成這個(gè)文件，然后再安裝相關(guān)的依賴(lài)。

{
  "name": "admin",
  "version": "1.0.0",
  "description": "后臺(tái)管理系統(tǒng)",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.14.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.18.0",
    "browser-sync": "^2.18.2",
    "css-loader": "^0.25.0",
    "ejs-compiled-loader": "^2.1.1",
    "element-ui": "1.2.9",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "glob": "^7.0.6",
    "gulp": "^3.9.1",
    "gulp-file-include": "^1.0.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2",
    "scss-loader": "0.0.1",
    "style-loader": "^0.13.1",
    "tween.js": "^16.6.0",
    "url-loader": "^0.5.7",
    "vue": "2.2.6",
    "vue-loader": "^10.0.2",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.4.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "2.2.6",
    "vuex": "^2.0.0",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server --hot --inline"
  },
  "author": "chen",
  "license": "ISC"
}

有了上面的配置，在命令行輸入$ npm install就可以安裝相關(guān)的依賴(lài)了！

(vue，vue-template-compiler，element-ui這幾個(gè)配置的版本號(hào)前面是沒(méi)有^，這是因?yàn)轫?xiàng)目上，我不需要再更新這些資源了，因?yàn)橹霸囘^(guò)，因?yàn)榘姹靖铝说膯?wèn)題，導(dǎo)致element顯示不正常，所以，就固定住了這幾個(gè)的版本！還有一個(gè)就是，這個(gè)是一個(gè)json文件，不能在這里寫(xiě)注釋喔！否則會(huì)報(bào)錯(cuò)！)

安裝完了之后，項(xiàng)目目錄應(yīng)該是這樣的。

.idea是我用webStorm編輯器開(kāi)發(fā)，自動(dòng)生成的文件
node_modules是安裝之后生成的node模塊文件，
.npmrc是使用淘寶的鏡像的文件，內(nèi)容如下

registry = http://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

配置完了package.json之后，下面寫(xiě)webpack的配置文件（webpack.config.babel.js）了。

webpack.config.babel.js，這樣命名是想讓webpack在編譯的時(shí)候自動(dòng)識(shí)別es6的語(yǔ)法，現(xiàn)在貌似不需要這樣命名了，之前用webpack1.x的時(shí)候貌似是需要的

webpack的配置，之前說(shuō)過(guò)，也寫(xiě)過(guò)文章，這里就當(dāng)簡(jiǎn)單復(fù)習(xí)一下，我就不一塊塊的說(shuō)了，直接在代碼那里寫(xiě)上注釋。代碼如下

let path = require("path");
let webpack = require("webpack");
/*
 html-webpack-plugin插件，webpack中生成HTML的插件，
 具體可以去這里查看https://www.npmjs.com/package/html-webpack-plugin
 */
let HtmlWebpackPlugin = require("html-webpack-plugin");
/*
 webpack插件，提取公共模塊
 */
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let config = {
    //入口文件配置
    entry: {
        index: path.resolve(__dirname, "src/js/page/index.js"),
        vendors: ["vue", "vue-router","vue-resource","vuex","element-ui","element-ui/lib/theme-default/index.css"] // 需要進(jìn)行多帶帶打包的文件
    },
    //出口文件配置
    output: {
        path: path.join(__dirname, "dist"), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對(duì)于它
        publicPath: "/dist/",                //模板、樣式、腳本、圖片等資源對(duì)應(yīng)的server上的路徑
        filename: "js/[name].js",            //每個(gè)頁(yè)面對(duì)應(yīng)的主js的生成配置
        chunkFilename: "js/[name].asyncChunk.js?"+new Date().getTime() //chunk生成的配置
    },
    module: {
        //加載器
        rules: [
            {
                test: /.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        scss: "vue-style-loader!css-loader!sass-loader", // 

附上代碼

import welcomeComponent from "./../components/admin_base/welcome.vue";

//路由控制
let snavRouter = [
    {
        path: "/",
        redirect: "/index?pos=0"
    },
    {
        path: "/index",
        component: welcomeComponent
    }
];
export {snavRouter}

接下來(lái)就配置入口文件，和入口文件的模板了。
入口文件，index.js

代碼如下：

require("../../html/index.html");
import Vue from "vue"
import VueRouter from "vue-router"
import VueResource from "vue-resource"
import ElementUI from "element-ui"
import "element-ui/lib/theme-default/index.css"
//使用router
Vue.use(VueRouter);
//使用resource
Vue.use(VueResource);
//使用ElementUI
Vue.use(ElementUI);
//引入router配置
import {snavRouter} from "./../router/router";
//實(shí)例化router
const router = new VueRouter({
    routes: snavRouter
});
/**
 * @description 啟動(dòng)App
 * @returns {{name: string}}
 * @constructor
 */
    //App啟動(dòng)
let App = new Vue({
    el: "#App",
    data(){
        return {
            "name": "index"
        }
    },
    router: router,
    mounted(){
    },
});

入口文件模板，index.html

代碼如下

把改弄的都弄好了之后。先跑一下，證明一下自己的配置是不是正確的！，npm run dev

之前在package.json已經(jīng)寫(xiě)好了，npm run dev
相當(dāng)于執(zhí)行dev對(duì)應(yīng)的命令行，在命令行輸入webpack-dev-server --hot --inline是一樣的效果！

在瀏覽器輸入‘http://localhost:9090/dist/ht...’
運(yùn)行結(jié)果成功的跑起來(lái)了！但是，大家有沒(méi)有發(fā)現(xiàn)，在瀏覽器的地址欄，出現(xiàn)的是‘http://localhost:9090/dist/ht...’。結(jié)果是正常的，因?yàn)榍懊嫖覀兣渲昧寺酚?，并且使用了路由！至于在地址上后面我為什么加上pos參數(shù)，下一章會(huì)說(shuō)到！

路由（vue-router）。大概原理就是，在瀏覽器地址欄輸入‘http://localhost:9090/dist/ht...’，路由（vue-router）就匹配到了(path: "/")。然后，重定向到了(redirect: "/index?pos=0")，重定向又匹配到了(path: "/index")，然后就加載了組件，加載了這個(gè)組件(component: welcomeComponent)，就會(huì)在index.html的里面輸出這個(gè)組件的內(nèi)容，（相關(guān)的知識(shí)，可以到網(wǎng)上參考vue-router）。這個(gè)組件(component: welcomeComponent)，就是我們之前編寫(xiě)的welcome.vue?？赡苷f(shuō)的有點(diǎn)亂，大家注意整理下，理清思路。

今天就先到這里了，這個(gè)系列往后會(huì)有幾篇文章繼續(xù)介紹，畢竟這篇文章只是介紹了基礎(chǔ)的一個(gè)項(xiàng)目的搭建和配置。以及把項(xiàng)目跑起來(lái)！vue-router和element還沒(méi)有寫(xiě)到。大家也放心好了，文章不會(huì)讓大家等太久的。
最后，如果大家發(fā)現(xiàn)我哪里寫(xiě)錯(cuò)了，或者是哪里寫(xiě)得不好，歡迎指點(diǎn)下。