vue+webpack+VS Code入门简单的项目配置

为了方便，这边的编译器选择的是VS Code (Visual Studio Code);

打开VS Code，选择好本身的工做空间，而后新建一个文件夹做为咱们项目的文件夹，而后，show time；

　　Ctrl + `     打开命令行，进行操做

1、初始化

　　a、进入本身刚才新建的项目文件夹

　　b、初始化咱们的项目，npm init；初始化成一个npm的项目；回车以后的一些选项，直接回车选择默认，

　　

　　输入yes，回车；

　　ok,如今在咱们的项目文件夹下就多了一个package.json的文件

2、安装所需包

　　a、既然咱们这边要配置的是vue+webpack，那么接下来进行安装；

　　　　npm i webpack@3.11.0 vue vue-loader

　　 （i : install  ;   @3.11.0  指定了一下版本，最新版为4的版本，操做有出入）

                

 

　　　　安装完，命令行和项目文件夹如上图，由警告内容能够看出，咱们还须要进行依赖的安装；

　　b、安装css-loader  和   vue-template-compiler；

　　　　npm i css-loader vue-template-compiler

　　　　ok，还有几个WARN没有关于第三方依赖的安装提示的，咱们就能够忽略了

　　项目初始化以及安装包已经完成了，接下来，咱们就能够在项目当中写一些内容了

3、项目内容

　　a、新建文件夹 src，做为源码文件夹

　　b、src中新建一个vue文件，app.vue

　　

　　整个的一个app.vue文件就是由template、script、style组成的一个组件

　　①<template></template> ：写的是html内容，要显示出来的东西

　　②<script></script> : 写的是控制显示内容变化的部分

　　③<style></style> : 写的就是css样式

　c、简单写一下内容

　　

　　data 做为组件初始化时的数据，为{{text}}提供了数据

写内容时，新安装VS Code的会以为好不方便，什么提示都没有，这是该咋办呢，那么根据下图在Ctrl+Shift+X扩展里安装一下几个经常使用的吧；　

   　　　　

如今咱们这样一个简单的组件写完了，可是这会确定仍是不能够运行的，接着来

4、配置文件

　　a、新建配置文件：webpack.config.js，进行配置

　　　　①const path = require('path')，导入nodejs里面的一个基本包，用来处理路径，这边使用绝对路径

 

　　　　②entry：声明入口

　　　　既然声明了入口，那咱们就须要一个入口文件，那么在src中新建一个index.js文件，做为入口文件；

　　　　而后将组件挂载到入口文件中；

　　　　　　a)在index.js中引用vue的类库  import Vue from 'vue'

　　　　　　b)把app.vue这个组件再引用进来  import App from './app.vue'

　　　　　　c)建立内容渲染出来以后用来显示的节点  

　　　　　　 　　const root = document.createElement('div')

　　　　　　　　document.body.appendChild(root)

　　　　　　d)New 一个VUE 对象，申明一个render方法，接收一个h参数，经过这个参数将咱们的组件App的内容进行渲染出来

　　　　　　　　 new Vue({  render: (h) => h(App)  })

 

　　　　　　e)调用API，$mount()；将渲染出来的内容mount到咱们第三步建立的节点上面

　　　　        　

　　　 ③再回到webpack.config.js文件，写入入口文件：entry:path.join(__dirname,'src/index.js')；（__dirname:为根目录）

　　　④出口文件配置：

　　　　 　　output:{

　　　　　　　　filename:'bundle.js',     //输出文件名

　　　　　　　　path:path.join(__dirname,'dist')     //输出文件路径

　　　　　　}

　　　⑤在package.json中加入下图一句话：

　　　　

　　　　这样，咱们就能够经过 npm run start来运行代码

5、运行调试 

　　经过 npm run start 运行

　　

　　报错，告诉咱们须要为.vue的文件申明一个loader；

　　module:{
　　　　//添加规则，rules
　　　　　　rules:[
　　　　　　　　　　{
　　　　　　　　　　　　test: /.vue$/,    //文件类型，正则
　　　　　　　　　　　　loader: 'vue-loader'   //使用的loader
　　　　　　　　　　}
　　　　　　　　]
　　　　　}

　　再次运行  npm run start ；ok,没有再报错！

       

　　在dist中生成了bundle.js;打开该文件，当中包括了，webpack固有的代码，用于处理模块依赖，下面还有全部Vue.js的源码，固然咱们写的代码也在里面；

 

以上内容，咱们配置了webpack,加载了.vue文件；那咱们的css，image文件怎么办呢？下面继续配置

 

1、配置文件中配置loader

　　a、css文件和图片文件

module.exports = {
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{

　　//正则加\进行对 . 的转译
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test:/\.css$/,
                use:[                     //这边使用use,数组来写形式
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(gif|jpg|png|svg|jpeg)$/,
                use:[
                    {
                        loader:'url-loader',       //数组里写对象形式，为了增长配置参数
                        options:{
                            limit:1024,    //小于1024KB的图片转为base64格式代码，存在js中，不生成文件
                            name:'[name].[ext]'   //输出文件的名字，[name]根据原名，[ext]扩展名
                        }
                    }
                ]
            }
        ]
    }
}

　　配置完成，安装相对应的loader；url-loader 依赖于 file-loader，因此也要安装;

　　

　　好了 ，安装完成！

2、写入CSS文件和图片

　　在src文件夹中新建一个assets文件夹，再在这个文件夹里新建一个images和一个styles文件夹，分别放如几张图片和新建一个test.css文件

　　　　　　

　　改写一下test.css和index.js；

                 

　　运行一下  npm run start  ;

　　ok 没有报错，咱们能够在dundle.js文件中查看咱们css文件和图片的打包状况；

　　关于图片好像没能彻底按咱们设置的limit值像预想中同样，转base64格式，这个问题，我也不怎么清楚，知道的求告知！！

 

　webpack-dev-server配置

　a、npm i webpack-dev-server进行安装

　b、npm i cross-env安装，做用：针对不一样平台设置环境变量的不一样来使用

　c、修改package.json文件中的scripts部分

         

　d、修改webpack.config.js文件

　　1）const isDev = process.env.NODE_ENV === 'development'声明一个变量用来判断当前的环境变量，返回值为true或者false

　　　　启动脚本时，前面的变量都存储在process.env这个对象当中

　　2）添加一下代码　

if(isDev){
　　config.devServer = {
　　　　port:'2018',          //监听端口
　　　　host:'0.0.0.0',       //能够经过内网IP访问
　　　　overlay:{　　　　　　　　//错误显示到网页
　　　　　　errors:true,
　　　　}
　　}
}

　

　　3）还要作的细节改动

module.exports = { }对象改为 const config = { }定义一个对象；在最后

 

 

　　   

 

 好了，到如今，既然做为一个前端项目，那就这样是确定打不开的，那就得须要一个html页面做为前端页面入口

  一、安装插件，npm i html-webpack-plugin，并引入配置文件中 const HTMLPlugin = require('html-webpack-plugin')

  二、使用插件

        

  三、添加

  plugins:[
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV:isDev?'"development"':'"production"'         //用于区分开发仍是生产环境，选择不一样的打包机制
            }
        }),
        new HTMLPlugin()
    ]

   四、运行 npm run dev;　

　　正常状况下估计都会变成如今这个样子：

　　

　　那这个问题是什么呢？其实最后这个问题仍是归于版本问题；咱们的 webpack用的是 @3.11.0的   这边安装的 webpack-dev-server也是版本3的，那就是问题了，

　　怎么办？妥协吧    npm i webpack-dev-server@2.11.2    重装一下  指定 2 的版本

　　装完以后，npm run dev 运行一下；

 　　

 

　　OK，完成，在浏览器中，经过localhost:2018 访问

　　

　　完成！！！

  

PS:

　　VS Code下载

　　连接：https://pan.baidu.com/s/1-PGMHzyMu-oF_LIYSFYEFg 密码：fsx7

　　例子源码下载

　　连接：https://pan.baidu.com/s/1Ll6Hb3aJuQrX8kD9QQwWKg 密码：yykn