资讯专栏INFORMATION COLUMN

webpack+vue项目实战(一,搭建运行环境和相关配置)

jemygraw / 3028人阅读

摘要:运行环境是,其它版本的小小伙伴要注意版本兼容的问题喔好了,首页在创建项目目录,下面进行项目的第一步,搭建环境。附上代码附上代码路由控制和接下来就配置入口文件,和入口文件的模板了。

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还没有写到。大家也放心好了,文章不会让大家等太久的。
最后,如果大家发现我哪里写错了,或者是哪里写得不好,欢迎指点下。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83823.html

相关文章

  • React项目实战环境搭建

    摘要:官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准,中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释,如遇到错误或者不理解的内容,欢迎实时指出。 前言 前面提到前端大统一的概念,如果感兴趣,欢迎说说自己的看法,点击前往。Web前端框架层出不穷,不可能面面俱到,这里给个小建议: 如果对Weex App感兴趣,应该选择vue框架; 如果...

    cnio 评论0 收藏0
  • React项目实战环境搭建

    摘要:官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准,中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释,如遇到错误或者不理解的内容,欢迎实时指出。 前言 前面提到前端大统一的概念,如果感兴趣,欢迎说说自己的看法,点击前往。Web前端框架层出不穷,不可能面面俱到,这里给个小建议: 如果对Weex App感兴趣,应该选择vue框架; 如果...

    GHOST_349178 评论0 收藏0
  • webpack+vue项目实战(五,监听路由,实现同个页面不同状态的切换)

    摘要:好了,闲话不多说今天要说的时利用监听路由的方式,实现同个页面不同状态的切换。只要等于,那么页面就是待确认回款页面进入待确认回款页面中,回款状态的筛选标签要加上。 1.前言 今天发完这一篇,就要这个系列告一段落了!以后如果有什么要补充的会继续补充!因为在后台管理项目上,搭建的话,主要就是这样了!还有的一些是具体到交互的处理,那个是要根据后端的需求,来进来比较细化的工作,我在这里就不说了!...

    guyan0319 评论0 收藏0
  • Vue 2.x 实战之后台管理系统开发(

    摘要:导语下文实战之后台管理系统开发二该文章将从头到尾梳理我是如何使用开发一个后台管理项目的,我会将自己遇到的问题贴出,希望可以帮助到其他人。构建项目框架准备对于大陆用户,建议将的注册表源设置为国内的镜像,如淘宝镜像,可以大幅提升安装速度。 1. 导语 下文:Vue 2.x 实战之后台管理系统开发(二) 该文章将从头到尾梳理我是如何使用 Vue 2 开发一个后台管理项目的,我会将自己遇到的问...

    darkbaby123 评论0 收藏0
  • 搭建vue+webpack+mock脚手架(

    摘要:前言仓库地址本文适合第一次搭建项目的朋友,讲讲我是怎么从零开始摸索着搭建一个项目框架的,属于总结归纳性质的文章。 前言 仓库地址:https://github.com/miaomiaozh... 本文适合第一次搭建项目的朋友,讲讲我是怎么从零开始摸索着搭建一个项目框架的,属于总结归纳性质的文章。 基于vue的多页应用 支持自定义mock数据 支持热加载 js打包成多个 项目结构介绍...

    waltr 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<