webpack+vue項目實戰（一,搭建運行環境和相關配置）

jemygraw 發布于2019-08-20 17:44 / 3131人閱讀

摘要：運行環境是，其它版本的小小伙伴要注意版本兼容的問題喔好了，首頁在創建項目目錄，下面進行項目的第一步，搭建環境。附上代碼附上代碼路由控制和接下來就配置入口文件，和入口文件的模板了。

1.前言

現在正在開發一個公司的后臺管理項目，項目是一個單頁面應用。功能上就是管理銷售訂單的各個環節，包括物流管理，回款管理，訂單管理等等的功能。這些就不多說了。項目是，基于webpack3,vue2.2.6,element2.2.9。js語法是使用es6,還有使用到的一些資源比如，vue-router,vue-resource,webpack-dev-server等。運行環境是node6.10.0,npm3.10.10，其它版本的小小伙伴要注意版本兼容的問題喔！

2.package.json

好了，首頁在創建項目目錄（admin），下面進行項目的第一步，搭建環境。搭建環境的第一步，就是創建package.json，我現在就是簡單粗暴的創建發-從之前的項目拷貝一個這樣的文件，然后再改一下，代碼就是下面這樣。大家也可以$ npm init生成這個文件，然后再安裝相關的依賴。

{
  "name": "admin",
  "version": "1.0.0",
  "description": "后臺管理系統",
  "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就可以安裝相關的依賴了！

(vue，vue-template-compiler，element-ui這幾個配置的版本號前面是沒有^，這是因為項目上，我不需要再更新這些資源了，因為之前試過，因為版本更新了的問題，導致element顯示不正常，所以，就固定住了這幾個的版本！還有一個就是，這個是一個json文件，不能在這里寫注釋喔！否則會報錯！)

安裝完了之后，項目目錄應該是這樣的。

.idea是我用webStorm編輯器開發，自動生成的文件
node_modules是安裝之后生成的node模塊文件，
.npmrc是使用淘寶的鏡像的文件，內容如下

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

3.webpack.config.babel.js

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

webpack.config.babel.js，這樣命名是想讓webpack在編譯的時候自動識別es6的語法，現在貌似不需要這樣命名了，之前用webpack1.x的時候貌似是需要的

webpack的配置，之前說過，也寫過文章，這里就當簡單復習一下，我就不一塊塊的說了，直接在代碼那里寫上注釋。代碼如下

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"] // 需要進行多帶帶打包的文件
    },
    //出口文件配置
    output: {
        path: path.join(__dirname, "dist"), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對于它
        publicPath: "/dist/",                //模板、樣式、腳本、圖片等資源對應的server上的路徑
        filename: "js/[name].js",            //每個頁面對應的主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}

5.index.js和index.html

接下來就配置入口文件，和入口文件的模板了。
入口文件，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";
//實例化router
const router = new VueRouter({
    routes: snavRouter
});
/**
 * @description 啟動App
 * @returns {{name: string}}
 * @constructor
 */
    //App啟動
let App = new Vue({
    el: "#App",
    data(){
        return {
            "name": "index"
        }
    },
    router: router,
    mounted(){
    },
});

入口文件模板，index.html

代碼如下

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

之前在package.json已經寫好了，npm run dev
相當于執行dev對應的命令行，在命令行輸入webpack-dev-server --hot --inline是一樣的效果！

在瀏覽器輸入‘http://localhost:9090/dist/ht...’
運行結果成功的跑起來了！但是，大家有沒有發現，在瀏覽器的地址欄，出現的是‘http://localhost:9090/dist/ht...’。結果是正常的，因為前面我們配置了路由，并且使用了路由！至于在地址上后面我為什么加上pos參數，下一章會說到！

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

6.未完待遇

今天就先到這里了，這個系列往后會有幾篇文章繼續介紹，畢竟這篇文章只是介紹了基礎的一個項目的搭建和配置。以及把項目跑起來！vue-router和element還沒有寫到。大家也放心好了，文章不會讓大家等太久的。
最后，如果大家發現我哪里寫錯了，或者是哪里寫得不好，歡迎指點下。

云服務器 GPU云服務器 iis7和iis8如何配置asp運行環境云服務器搭建vue項目阿里云服務器搭建vue項目運行環境配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83823.html

React項目實戰：環境搭建

摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。前言前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議：如果對Weex App感興趣，應該選擇vue框架；如果...

cnio 2019-08-21 17:47 評論0 收藏0
React項目實戰：環境搭建

摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。前言前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議：如果對Weex App感興趣，應該選擇vue框架；如果...

GHOST_349178 2019-08-01 18:04 評論0 收藏0
webpack+vue項目實戰（五，監聽路由，實現同個頁面不同狀態的切換）

摘要：好了，閑話不多說今天要說的時利用監聽路由的方式，實現同個頁面不同狀態的切換。只要等于，那么頁面就是待確認回款頁面進入待確認回款頁面中，回款狀態的篩選標簽要加上。 1.前言今天發完這一篇，就要這個系列告一段落了！以后如果有什么要補充的會繼續補充！因為在后臺管理項目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個是要根據后端的需求，來進來比較細化的工作，我在這里就不說了！...

guyan0319 2019-08-20 17:47 評論0 收藏0
Vue 2.x 實戰之后臺管理系統開發（一）

摘要：導語下文實戰之后臺管理系統開發二該文章將從頭到尾梳理我是如何使用開發一個后臺管理項目的，我會將自己遇到的問題貼出，希望可以幫助到其他人。構建項目框架準備對于大陸用戶，建議將的注冊表源設置為國內的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導語下文：Vue 2.x 實戰之后臺管理系統開發（二）該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個后臺管理項目的，我會將自己遇到的問...

darkbaby123 2019-08-20 16:49 評論0 收藏0
搭建vue+webpack+mock腳手架（一）

摘要：前言倉庫地址本文適合第一次搭建項目的朋友，講講我是怎么從零開始摸索著搭建一個項目框架的，屬于總結歸納性質的文章。前言倉庫地址：https://github.com/miaomiaozh... 本文適合第一次搭建項目的朋友，講講我是怎么從零開始摸索著搭建一個項目框架的，屬于總結歸納性質的文章。基于vue的多頁應用支持自定義mock數據支持熱加載 js打包成多個項目結構介紹...

waltr 2019-08-21 11:29 評論0 收藏0