手动配置一个vue项目小案例

作者: 呦释原点 | 来源:发表于2019-08-29 12:24 被阅读0次

手动配置一个vue项目小案例
Vue脚手架
vue04
vue-cli3配置文件
vue项目搭建及打包最全实战教程
vue-cli脚手架的安装
parcel-vue
关于vue-cli3.0配置文件vue.config.js的问题
【vue】9.3 VUE3.0+elementUI搭建脚手架项目
2018-06-10 zn社笔记四

前言

之前使用vue-cli能成功搭建vue项目环境，对立面的内容理解的不是很清楚，现在手动搭建一个基础项目

使用vue-cli初始化项目参考中的项目初始化

注1： node wbpack环境自行安装可参考
注2：部分代码含义已在注释中说明

创建文件目录

VDemo主目录，所有的练习项目都放在这里了
node_modules，放在了外面，因为练习，其他项目公用这一个
src 放源码
dist 打包生产的文件

1 安装需要的插件和依赖

vue
vue-loader
vue-template-compiler
babel-loader
babel-core
babel-preset-es2015
babel-plugin-transform-runtime
style-loader
css-loader
url-loader
html-webpack-plugin 此插件用于运行项目后再dist文件生成编译后的*.html文件

例如：
npm init -y 初始化package.json文件
sudo npm install vue

2 创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue程序启动</title>
</head>
<body>

    <!--vue单文件方式， 就是以*.vue结尾的文件， 最终通过webpack编译成*.js文件在浏览器运行-->
    <!--webpack需要找人来理解单文件代码， vue-loader,vue-template-compiler,代码中依赖vue-->


    <!--1. 在index.html中写上 <div id="app"></div> app可以随意起名-->
    <!--此处内容是一个坑，未来vue编译好的代码往里面插入-->
    <div id="app"></div>

</body>
</html>

3. 创建main.js

// 2.引入 vue
import Vue from 'vue';

// 引入一个模块的内容  模块内容是
import App from './app.vue';


// 3. 创建Vue实例， 一般一个项目， 大多一个vue实例
new Vue({
    el:'#app',   // 此处app对应第一步中的id app
    render:function (creater) {  // creater是一个形参， 是一个内部方法  将App中包含的内容（template/script/style）生成DOM结构
        return creater(App); // render方法返回creater函数的返回值， 放在#app中
    }

})

4. 创建一个模块App

<!--一个vue模块， 模块中的内容应该是<template></template>+<script></script>+<style></style>三种-->

<template>
    <!--template只能包含一个根节点-->
    <div>Hello World</div>
</template>

<script>

</script>

<style scoped>

</style>
<!--添加scoped 后该style样式只对本文件生效-->

5. 创建webpack.config.js文件 webpack配置文件

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 使用此插件在dist下生产index.html我文件，为vue编译后的文件

const path = require('path');

module.exports = {
    entry:{ //main是默认入口,也可以是多入口
        main:'./src/main.js'
    },
    //出口
    output:{
        filename:'./build.js', //指定js文件
        path: path.join(__dirname,'dist')          //最好是绝对路径
        //代表当前目录的上一级的dist
    },
    module:{
        //一样的功能rules:   webpack2.x之后新加的
        rules:[       //require('./a.css||./a.js')
            {test:/\.css$/,
                loader:'style-loader!css-loader',
                //顺序是反过来的2!1
            },
            {
                test:/\.(jpg|svg|png|gif)$/,
                loader:'url-loader?limit=4096&name=[name].[ext]',
                //顺序是反过来的2!1
                //[name].[ext]内置提供的，因为本身是先读这个文件
                // options:{
                //    limit:4096,
                //    name:'[name].[ext]'
                // }
            },{//处理ES6的js
                test:/\.js$/,
                loader:'babel-loader',
                //排除 node_modules下的所有
                exclude:/node_modules/,
                options:{
                    presets:['es2015'],//关键字
                    plugins:['transform-runtime'],//函数
                }
            },{//解析vue
                test:/\.vue$/,
                loader:'vue-loader',//vue-template-compiler是代码上的依赖
            }
        ],
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
        })
    ],





}

6. 在终端执行webpack命令

终端

执行命令后如果出现错误可自行查看终端错误提示解决（为运行成功出现了很多问题）

其中Hash:fe7807b92227aa241978 是本次执行的标识
执行完后会在dist文件中生成编译后的index.html文件，直接在浏览器中打开

结果

7. 安装 webpack-cli 自动执行项目

sudo npm i -D webpack-cli

一开始安装的 sudo npm install webpack-dev-server 执行../node_modules/.bin/webpack-dev-server --inline --hot --open后报错
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
错误提示很明显 webpack-dev-server 次开发环境服务已经移到webpack-cli中，直接安装webpack-cli即可。我试试按旧版操作的，出现很多问题也就不奇怪了

在终端执行../node_modules/.bin/webpack-dev-server --inline --hot --open命令自动运行项目

因为我的项目和node_modules在同一级目录所以添加了../

终端展示

bogon:day01 Mac$ 
bogon:day01 Mac$ 
bogon:day01 mac$ ../node_modules/.bin/webpack-dev-server --inline --hot --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/mac/Desktop/web学习/VDemo/day01
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: Hash: b8059fdec0c54b016033
Version: webpack 4.35.2
Time: 1934ms
Built at: 08/29/2019 12:46:06 PM
     Asset       Size  Chunks             Chunk Names
./build.js    656 KiB    main  [emitted]  main
index.html  448 bytes          [emitted]  
Entrypoint main = ./build.js
[0] multi ../node_modules/webpack-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js 52 bytes {main} [built]
[../../../../node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[../../../../node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[../../../../node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[../../../../node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[../../../../node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[../node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[../node_modules/vue/dist/vue.runtime.esm.js] 222 KiB {main} [built]
[../node_modules/webpack-dev-server/client/index.js?http://localhost:8080] ../node_modules/webpack-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[../node_modules/webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
[../node_modules/webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
[../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] 2.85 KiB {main} [built]
[../node_modules/webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
[../node_modules/webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
[./src/main.js] 583 bytes {main} [built]
    + 31 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [../../../../node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [../../../../node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
    [../node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 606 bytes {0} [built]
    [../node_modules/lodash/lodash.js] 528 KiB {0} [built]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 5f691fc7e2db2405fee2
Version: webpack 4.35.2
Time: 97ms
Built at: 08/29/2019 12:54:23 PM
                                  Asset       Size  Chunks             Chunk Names
                             ./build.js    656 KiB    main  [emitted]  main
   735862314b614f94da0b.hot-update.json   44 bytes          [emitted]  
   b8059fdec0c54b016033.hot-update.json   46 bytes          [emitted]  
                             index.html  448 bytes          [emitted]  
main.b8059fdec0c54b016033.hot-update.js   1.59 KiB    main  [emitted]  main
Entrypoint main = ./build.js main.b8059fdec0c54b016033.hot-update.js
[../node_modules/babel-loader/lib/index.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=script&lang=js&] ../node_modules/babel-loader/lib??ref--2!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js& 34 bytes {main} [built]
[../node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=template&id=5ef48958&scoped=true&] ../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 240 bytes {main} [built]
[./src/app.vue] 1.06 KiB {main} [built]
    + 43 hidden modules
Child html-webpack-plugin for "index.html":
                                   Asset      Size  Chunks             Chunk Names
    735862314b614f94da0b.hot-update.json  44 bytes          [emitted]  
     + 1 hidden asset
    Entrypoint undefined = index.html
       4 modules
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 3e3ea0b91c60b2b9cc59
Version: webpack 4.35.2
Time: 99ms
Built at: 08/29/2019 12:54:42 PM
                               Asset       Size  Chunks             Chunk Names
                          ./build.js    656 KiB    main  [emitted]  main
3d5ed972804dc101f339.hot-update.json   44 bytes          [emitted]  
5f691fc7e2db2405fee2.hot-update.json   35 bytes          [emitted]  
                          index.html  448 bytes          [emitted]  
Entrypoint main = ./build.js
[../node_modules/babel-loader/lib/index.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=script&lang=js&] ../node_modules/babel-loader/lib??ref--2!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js& 34 bytes {main} [built]
[../node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=template&id=5ef48958&scoped=true&] ../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 240 bytes {main} [built]
[./src/app.vue] 1.06 KiB {main} [built]
    + 43 hidden modules
Child html-webpack-plugin for "index.html":
                                   Asset      Size  Chunks             Chunk Names
    3d5ed972804dc101f339.hot-update.json  44 bytes          [emitted]  
     + 1 hidden asset
    Entrypoint undefined = index.html
       4 modules
ℹ ｢wdm｣: Compiled successfully.

8.配置package.json文件，精简命令

在接手新项目时首先需要查看package.json文件看看有都少命令

image.png

文件内容

{
  "scripts":{
    "dev":"../node_modules/.bin/webpack-dev-server --inline --hot --open",
    "build":"webpack"
  }
}

然后执行webpack.json中的dev命令npm run dev相当于../node_modules/.bin/webpack-dev-server --inline --hot --open 即可运行项目
执行npm run build 即可打包项目，生成dist文件

指定端口添加--port 端口号
指定浏览器打开 --open 'google chrome' 不指定就是默认浏览器打开

{
  "scripts":{
    "dev":"../node_modules/.bin/webpack-dev-server --inline --hot --open 'google chrome' --port 5566",
    "build":"webpack"
  }
}

手动配置一个vue项目小案例
前言之前使用vue-cli能成功搭建vue项目环境，对立面的内容理解的不是很清楚，现在手动搭建一个基础项目使...
Vue脚手架
1. Vue 脚手架的基本用法在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现...
vue04
vue-cli 手动配置自己:webpack+vue-loader 如何运行此项目？1. npm install ...
vue-cli3配置文件
一、vue.config.js文件配置在项目根目录下自己手动新建vue.config.js文件，会被@vue/c...
vue项目搭建及打包最全实战教程
vue的项目可以通过webpack手动配置，但一般项目都是通过vue cli （脚手架）来快速搭建。下面就来详细讲...
vue-cli脚手架的安装
1、进入一个目录，创建项目命令：vue create project-one 2、我们这里选择手动配置 3、选择...
parcel-vue
使用parcel + vue的项目简单介绍介绍 Parcel 手动搭建快速构建介绍传统的webpack配置...
关于vue-cli3.0配置文件vue.config.js的问题
背景在使用vue-cli搭建vue项目的时候，由于3.0比起2.x精简了许多配置文件，所以需要自己手动配置相关的...
【vue】9.3 VUE3.0+elementUI搭建脚手架项目
更新本地vue: 创建vue项目选择手动配置选择你项目需要添加的功能:按空格键选中或者取消选中，按方向键的上下...
2018-06-10 zn社笔记四
一、手动配置（基本不太用） webpack+vue-loaderwebpack加载模块如何运行此项目？npm in...