vuetest流程

Posted 2021-03-11 dxh0535

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuetest流程相关的知识，希望对你有一定的参考价值。

建立文件夹test，用vscode打开文件夹

npm init  -y     //生成 一个package.json

新建dist，src，config目录,在src目录下添加 index.html index.js ,其代码为如下，为实现隔行变色效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

import $ from ‘jquery‘   //es6 模块化语法，有兼容问题。需要用webpack转换，在需要的地方导入转化后的代码

$(function(){
    $(‘li:odd‘).css(‘backgroundColor‘,‘pink‘)
    $(‘li:even‘).css(‘backgroundColor‘,‘red‘)
})

上面js，需要安装jquery

npm install jquery --save

安装与配置webpack部分

npm install webpack webpack-cli webpack-dev-server -D

创建webpack.config.js 文件夹，初始化webpack打包模式

module.exports={
    mode:‘development‘  //production
}

package.json script节点增加

"dev":"webpack"

修改index.html 的js 引入部分

<script src="./index.js"></script>
改为
<script src="../dist/main.js"></script>

npm run dev 运行正常，浏览出现隔行变色

自动打包配置为

入口文件：src/index.js

输出文件：dist/main.js

修改默认打包配置

const path = require(‘path‘)  //处理路径信息
module.exports ={
    mode:‘development‘, // development || production
    entry:path.join(__dirname, ‘./src/index.js‘),  //webpack 打包入口文件
    output:{
        path: path.join(__dirname,‘./dist‘), //打包完成放置位置
        filename:‘bundle.js‘ //打包后的文件名
    }
}

修改html引入文件为

<script src="../dist/bundle.js"></script>

npm run dev 运行结果正常

配置自动打包

已经安装webpack-dev-server 自动打包npm

修改package.json

    "dev": "webpack-dev-server"

备注：配置自动打包的参数

    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

自动打包的bundle.js在根目录下，需要需改html引入

<script src="/bundle.js"></script>

运行，出现一个web服务，在src目录能打开。

自动生成根目录预览页面

npm install html-webpack-plugin -D

在webpack头部配置插件，在plugins加载插件

const HtmlWebPlugin =require(‘html-webpack-plugin‘) //导入生成预览页面插件
const htmlPlugin = new HtmlWebPlugin({ //创建插件实例
    template:‘./src/index.html‘,  //要复制的模板文件
    filename:‘index.html‘ //生成后的文件名称，在内存中。
})

    //插件，用于生产模板和各项功能
    plugins:[ htmlPlugin ] //打包用到的插件列表

loader加载器

css加载器，在src新建css目录，添加1.css 内容

li{
    list-style: none;
}

index.js 增加

import ‘./css/1.css‘

安装样式loader加载器

npm i style-loader css-loader -D

配置webpack.config.js

    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /.js$/, //匹配所有的js文件
                exclude: /node_modules/,//除了node_modules以外
            },
            //配置css loaders
            { test: /.css$/, use: [‘style-loader‘, ‘css-loader‘] },
            { test: /.less$/, use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘] },
            { test: /.scss$/, use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘] }
        ]
    },

运行npm run dev 列表样式已经生效

备注：scss less 能正常使用还需要安装,

npm i less-loader less -D

npm i sass-loader node-sass -D

poscss解决css兼容性问题

html增加 <input type="text" placeholder="ceshi">

1.css增加

::placeholder{

color: red;

}

在google下浏览字体变红，在ie下无效果。解决兼容办法如下

npm i postcss-loader autoprefixer -D

在根目录创建postcss.config.js 配置文件，并初始化如下代码

const autoprefixer =require(‘autoprefixer‘)
module.exports={
    plugins:[autoprefixer]
}

在webpack.config.js修改css loader，调用

{ test: /.css$/, use: [‘style-loader‘, ‘css-loader‘,‘postcss-loader‘] }

打包图片和字体

npm i url-loader file-loader -D

{ test: /.jpg|png|gif|bmp$/, use:[‘url-loader?limt=100000000‘]}

npmrun

以上是关于vuetest流程的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段15——git命令操作一个完整流程

运行vue init webpack vueTest时报错

Android 逆向ART 脱壳 ( DexClassLoader 脱壳 | DexClassLoader 构造函数 | 参考 Dalvik 的 DexClassLoader 类加载流程 )(代码片段

Android 逆向整体加固脱壳 ( DEX 优化流程分析 | DexPrepare.cpp 中 dvmOptimizeDexFile() 方法分析 | /bin/dexopt 源码分析 )(代码片段