Vue入门实战01：搭建webpack+vue开发环境

来源：互联网发布：linux系统ls命令编辑：程序博客网时间：2024/05/22 06:08

最近用webpack+vue构建了一个移动端项目，摸石头过河遇到了不少坑，看这段时间也没有更新博客了，就记录一下自己在这个项目中遇到的一些技术点，分享出来。

本篇主要分享一下利用webpack搭建vue开发环境，前提电脑上须安装好了nodejs。

1.搭建开发目录

新建一项目目录myVue，进入该目录新建一个app和一个node_modules文件夹；

进入app文件夹，新建pages目录用于存放页面，新建一个component目录存放组件，新建conmmon目录用于存放公共资源；

在app里面建一个入口文件，命名为app.js和一个入口页面app.vue，以及一个index.html文件

在myVue目录下新建webpack.config.js启动文件

建成的文件目录如下图所示：

2.配置启动文件

打开webpack.config.js文件，配置和说明如下：

//引入webpack插件var webpack = require("webpack");// 生成HTML插件var html = require("html-webpack-plugin");// 删除文件插件（后面用到删除www文件夹）var clean = require("clean-webpack-plugin");//用到的模块module.exports = {//入口文件entry:"./app/app.js",//输出output:{//输出地址，会自动创建文件夹wwwpath:__dirname+"/www",//输出命名filename:"bundle.js"},//用到的模块，基本上常用的就是这几个module:{loaders:[{//css打包，使用正则表达式识别样式文件，常用用到了style-loader、css-loader、less-loader模块test:/\.css$/,loader:"style-loader!css-loader!less-loader"},{//图片打包，limit限制打包的图片大小和图片放到imges文件下使用原名字，使用4位的hash值防止命名相同而冲突，使用原来的扩展名test:/\.(png|jpe?g|gif)$/,loader:"url-loader?limit=1000&name=images/[name].[hash:4].[ext]"},{//vue文件打包test:/\.vue$/,loader:"vue-loader"},{//字体打包test:/\.(woff|svg|eot|ttf)\??.*$/,loader:"url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]"}]},//使用插件plugins:[//生成html，标题，用到的模板new html({title:"myVue",template:__dirname+"/app/index.html",filename:"index.html",}),//删除www目录，这里为了后面看效果，先不删除// new clean(["www"]),],//sudo npm install webpack-dev-server -g 设置自动刷新和端口devServer: {contentBase:"./www",    inline: true,    port: 8088    },resolve:{alias: {'vue$': 'vue/dist/vue.common.js'        }}}

其中：

entry 入口文件让webpack用哪个文件作为项目的入口

output 出口让webpack把处理完成的文件放在哪里

module 模块要用什么不同的模块来处理各种类型的文件

plugins 插件用来配置需要用到的插件

resolve 用来设置路径指向

用到的模块包括：

webpack html-webpack-plugin clean-webpack-plugin style-loader css-loader less-loader less url-loader file-loader vue vue-router vue-loader vue-template-compiler babel-loader babel-preset-es2015 babel-core babel-plugin-transform-runtime

3.安装相应的模块

1）在myVue目录下安装模块

npm install webpack html-webpack-plugin clean-webpack-plugin style-loader css-loader less-loader less url-loader file-loader vue vue-router vue-loader vue-template-compiler babel-loader babel-preset-es2015 babel-core babel-plugin-transform-runtime

2）安装自动刷新全局模块

npm install webpack-dev-server -g

4.配置index.html文件

打开文件，配置如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="app"><app></app></div></body></html>

注意：

移动端用需要配置视口viewport，配置头部，配置body部分id

5.构建测试代码

下面要实现功能就是点击下方导航就跳转到对应的页面，而且标题会随着页面而修改。

1）构建各子页面和公共组件

在pages目录下新建五个目录，分别为首页、分类、社区、购物车和我的对应的英文文件夹，再在每个文件夹里面设置对应的vue页面home.vue,classify.vue,community.vue,shopcart.vue,mine.vue,每个页面写入测试内容，比如home.vue写入代码如下：

<template><div class="home"><header1 title="首页"></header1><div>{{data}}</div></div></template><script type="text/javascript">import Header1 from '../../component/header/header1.vue';export default {components:{Header1},data(){return{data:"这是首页"}}}</script>

注意到每个页面要导入header1，在component组件下面新建header文件夹，新建一个header1.vue文件，写入头部代码：

<template><div class="header">{{title}}</div></template><script type="text/javascript">export default {props:["title"]}</script><style type="text/css">.header {background: #ddd;text-align: center;line-height: 50px;}</style>

那如何将各页面标题传值到标题上呢？这里用到了props传值，在vue官方文档上解释为：“组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props 把数据传给子组件”。

那么这里props绑定的是title,而在各个子页面的头部，直接给title赋值即可，比如home页面的：

2）构建入口文件入口页面

打开app.js文件，里面要导入组件vue,导入vue路由，导入各个页面

import Vue from 'vue';import VueRouter from 'vue-router';//主页面入口import App from "./app.vue";//其他页面import Home from "./pages/home/home.vue";import Community from "./pages/community/community.vue";import Classify from "./pages/classify/classify.vue";import Mine from "./pages/mine/mine.vue";import Shopcart from "./pages/shopcart/shopcart.vue";Vue.use(VueRouter);const router = new VueRouter({routes:[{path:"/",component:Home},{path:"/community",component:Community},{path:"/classify",component:Classify},{path:"/mine",component:Mine},{path:"/shopcart",component:Shopcart}]})//指定一开始加载的页面new Vue({router,render:h=>h(App)}).$mount("#app")

这里将对应的组件和页面导入，并生命一个路由，里面设置各页面对应的路径和指定的页面，然后new Vue一个vue，在里面使用这个路由，然后使用render函数和箭头函数返回App组件，然后使用mount挂载到Index.html里面去。

首页默认为home页，path路径设置为/

打开aap.vue页面，写入测试代码

<template><div><div class="content"><router-view></router-view></div><div class="nav"><router-link to="/">首页</router-link><router-link to="/classify">分类</router-link><router-link to="/community">社区</router-link><router-link to="/shopcart">购物车</router-link><router-link to="/mine">我的</router-link></div></div></template><style type="text/css" lang="less">/*使用less样式*/@import './common/css/reset.css';.nav{position: fixed;bottom: 0;width: 100%;display: flex;border-top: 1px solid #ccc;background: white;a{flex:1;display: block;text-align: center;line-height: 50px;color: black;}}.content{font-size: 30px;padding-bottom: 50px;}</style>

使用router-link路由，to到app.js中对应的path，路由对应的页面放在router-view中，使用less方式设置样式表；

另外这里也import如重置样式表，当然也可以用link。