上次发现了vue-cli,发现还是挺好用的,开箱即用,但是对于刚接触这些的同学来说,理解里面的东西还是有点困难的,我这篇博客只讲项目搭建,不会过多的介绍vue

1-环境搭建

  npm是基于node.js的,所以我们需要先安装node.js,这个直接去官网下载安装包就行,安装完成之后里面会自带npm

    npm是属于国外的一个源,在这里我推荐使用淘宝镜像,淘宝镜像是国内的源,速度会快一点

 安装方法:
    * 命令行执行 npm config set registry https://registry.npm.taobao.org 
    * npm info underscore (如果上面配置正确这个命令会有字符串response)
    * 安装完成之后就可以使用 cnpm 进行下载资源了

2-项目构建

    1)我们先建一个 vue_demo 的文件夹

    2)打开cmd ,执行cd 新建的文件夹路径, 定位到该文件夹下面

    3)执行 cnpm init ,执行之后会让你填一些东西,不停的回车就行,没有什么特别的需求这些东西默认就可以了,完成之后会发现多了一个这样的文件package.json,打开了看一下,里面就是刚才让你填的东西

    4)创建一个page文件夹,里面创建一个Test.vue文件,内容如下

<template>
    <div>
        <H1>This Test ...</H1>
    </div>
</template>

<script>
    export default {
        name: "test"//组件名称
    }
</script>

<style scoped>

</style>
    回到上层,创建一个 App.vue文件,内容如下
<template>
    <test></test><!-- 使用组件 -->
</template>

<script>
    import Test from "./page/Test.vue";//引入组件
    export default {
        components: {Test}//引入组件
    }
</script>

<style scoped>

</style>

    现在我们的页面内容算是完成了,现在我们要使用我们的页面

    新建一个main.js文件,内容如下

import Vue from 'vue'//引入vue
import App from './App.vue'//引入页面

new Vue({
    el: '#app',
    render: h => h(App)//页面最开始展示的页面
})

3-webpack配置

    现在关于vue的算是弄完了,准备webpack的配置

    创建一个webpack.config.js的文件,内容如下

const {VueLoaderPlugin} = require('vue-loader');

module.exports = {
    entry: {
        index: "./main.js"  //webpack的入口文件,指定将哪个文件进行打包
    },
    module: {
        rules: [{
            test: /\.vue$/,//vue文件加载器
            use: ['vue-loader']
        }, {
            test: /\.js$/,//js文件加载器
            use: ['babel-loader'],
            exclude: /node_modules/
        }, {
            test: /\.less$/,//lsaa文件加载器
            loaders: ["style-loader", "css-loader", "less-loader"]
        }, {
            test: /\.css$/,//css文件加载器
            loaders: ["style-loader", "css-loader"]
        }]
    },
    plugins: [
        // 添加VueLoaderPlugin,以响应vue-loader
        new VueLoaderPlugin()
    ]
};

    写到这里我需要说一下,大家可以看到我的webpack配置文件里面只有入口文件,并没有出口文件,因为我的出口文件写在了其他的地方,我现在是跟进我之前的项目在做练习,当然这并不影响大家的使用,因为我做的是前后台分离的,也就是前台和后台可以说是没有关系的,只要要前台的话可以直接把我项目里面的ui文件夹扣出来修改些一点点配置就可以了,文章最后会有我做的这个项目的GitHub的代码,想跟进我的项目可以看我发的博客

    现在来看看我其他的配置文件,现在新建两个文件,webpack.build.config.js    webpack.dev.config.js

    webpack.build.config.js=>主要用于生产模式,将项目直接打包压缩,配置如下

const merge = require('webpack-merge');//用于合并两个配置文件的工具
const common = require('./webpack.config.js');//加载之前定义的配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin');//HTTPWebpackPlugin这个会经常用到,是可以将你所有配置好的东西打包成一个html文件,功能很强大,我在这简单介绍一下怎么用,具体的大家可以自行了解
module.exports = merge(common, {
    output: {
        path: __dirname + "/../src/main/webapp/assets/dist/",//打包后输出的文件地址,我这里配置的地址是我项目中SpringMVC存放页面的地方,如果你只需要前台请自行修改这里的配置,其实不修改也行,它会自动创建这个地址的,__dirname是webpack中的全局关键字,存放的项目的根目录的绝对路径
        filename: "[name].js"//打包后输出的文件名,[name]就是使用入口文件的key做名称
    },
    plugins: [
        new HtmlWebpackPlugin({//要使用就必须得new出来
            title: '首页',//生成的html文件的title
            template: 'index.html',//生成的html文件可以使用定义好的模板,生成好的html文件会继承模板的所有内容,同时如果模板里面定义好了title,上面的title配置是不会生效的
            filename: 'index.html',//生成的title文件的名称
            hash:true,//是否产生hash值
            chunks: ["index"],//加载那些js文件,这个js文件就是输出的js文件名
            chunksSortMode:'manual'//排序方式
        })
    ],
    devtool: 'inline-source-map'//开启控制台输出错误信息具体在哪行
});
webpack.dev.config.js=>主要用于开发模式,另起服务器,单独挂起页面,实现热加载功能,配置如下
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.config.js');
module.exports = merge(common, {
    output: {
        path:  "/",//热加载模式不能指定输出的文件地址,它输出的文件会缓存放在这里,你是看不到的,这里必须这样配置
        filename: "[name].js"
    },
    devServer: {//webpack-server的配置
        host: 'localhost',//服务显示的地址localhsot  127.0.0.1  本机的ip地址都可以
        port: 8090,//服务的端口号
        open: true,//服务启动是否打开浏览器,打开的都是默认的浏览器
        contentBase: './',//服务器加载的目录,会自动找到该目录下的index.html文件进行页面展示
        inline: true,//页面刷新方式
        proxy: {//配置代理,因为我是前后台分离的,所以在调试的时候需要这个代理的配置才能向后台取数据
            '/': {//代理所有的url请求
                target: 'http://localhost:9876'//代理的地址,我的tomcat配置的端口是9876,如果你们配的不是那就需要修改这里了
            }
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '首页',
            template: 'index.html',
            filename: 'index.html',
            hash:true,
            chunks: ["index"],
            chunksSortMode:'manual'
        })
    ],
    devtool: 'inline-source-map'
});

    现在新建一个index.html,也就是我们的模板文件,看到title里面的那一段了吧,这个就是使用HtmlWebpackPlugin里面的配置的title作为title

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
4-启动项目

    现在我们把这些配置文件配好了该怎么使用呢?

    还记得最开始生成的package.json文件吧,我们现在开始修改它,看到scripts了吧,在里面加上两句,现在来解读这两句的意思

    build=> wepack --config webpack.build.config.js --mode producton

        wepack :接触wepack的都会看到这个命令,就是打包命令

        --config :配置指定引用那个配置文件,默认引用webpack.config.js 文件

        --mode: 有两个配置,一个开发配置,一个生产配置,production就是生产配置,development就是开发配置

    dev=> webpack-dev-server --hot --config webpack.dev.config.js --mode development

        webpack-dev-server: 启动webpackServer服务

        --hot: 启用热加载

{
  "name": "vue_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	
    "build": "webpack --config webpack.build.config.js --mode production",
    "dev": "webpack-dev-server --hot --config webpack.dev.config.js --mode development"
	
  },
  "author": "",
  "license": "ISC"
}

    我们配置这个有什么用呢?其实不配置也是可以的,我们需要做这些事的时候就直接把定义在里面的东西直接在cmd中执行,但是这么长一个一个的敲出来很累啊,所以定义好了就可以直接npm run build  /   npm run dev   就可以代替我们执行里面的东西

    好了我们现在开始执行一把,可以看到报错了,说找不到这个模块 webpack-merge,这是因为我们没有下载这个模块,遇到这样的问题,我们直接cnpm/npm instal [缺少的模块名] --save 

    :npm、cnpm任选一个,没有装淘宝镜像的只能使用npm


5-加载模块    

    其实我们这个项目缺少很多的模块,为什么我之前不全部给加进去呢?因为第一遇到错误解决问题会加深自己的印象,第二遇到类似的问题下次可以自己一下解决,废话不多说,我们需要哪些模块呢?

    其实我们在webpack的配置中就可以看到,上面的webpac-merge不正是我们之前配置中写的一段有么


    看看,确实是有,而且下面还有一个html-webpak-plugin,没错,这个也是我们所需要的


    还有这些都是我们需要的,这么多我们一个一个的敲也太慢了吧,我们可以这样

    npm install [模块名] [模块名] --save

    多个模块中间用空格连起来就可以一次下载多个依赖包了,这里大家就自己敲了,毕竟也是复制粘贴,不想敲的话可以把我的项目下下来,然后直接npm install就完了

    我们把上面的弄完其实还有一些包,因为我们是基于vue的,所以还会有关于vue的包

    npm install vue vue-template-compiler --save

    我们还需要一些webpack的依赖

    npm install webpack webpack-cli webpack-dev-server --save

    好了,大概就这么多,当我们下载完成之后会发现package.json被改了,而且还多了一个node_modules这样文件夹,对的,就是我们安装了那些依赖都在这里可以看到,其实也可以直接在这里面写上这些依赖然名和版本号,然后npm install 就可以全部下载下来啦

    最后附上我的package.json

{
  "name": "vue_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.build.config.js --mode production",
    "dev": "webpack-dev-server --hot --config webpack.dev.config.js --mode development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "vue": "^2.5.16",
    "vue-loader": "^15.2.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.13.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  }
}

好了,现在我们开始打包文件吧 npm run build


    执行到最后没有错误就算大工告成了,看看输出目录是不是多了两个文件,一个index.html ,一个index.js,现在直接在浏览器看index.html,如果和我做的是一样的,那么就应该是下面的这种结果


    现在再来执行npm run dev,尝尝热加载的好处,它会自动打开你的浏览器,然后看到的结果应该是和上面一样的,现在我们修改一下Test.vue或者App.vue里面的内容都可以,看看页面会不会实时的根据你的改动而变化呢,是不是很有趣

项目地址:GitHub传送门

转载请标明出处:https://blog.csdn.net/qq_33733799/article/details/80846459

Logo

前往低代码交流专区

更多推荐