美文网首页
vue依赖文件的安装

vue依赖文件的安装

作者: 黑白说程序 | 来源:发表于2020-09-28 16:30 被阅读0次

    webpack作用模块打包工具,并可以自动处理各个模块之间的依赖

    webpack安装命令

    npm install webpack@3.6.0 -g  @后面指点版本号 -g是全局安装的意思

    npm install webpack@3.6.0 --save -dev  这是局部安装,全局安装的版本可以是最新的,局部安装可以根据项目需求定义

    src源码文件夹

    dist打包后的文件

    const past=require(’path‘) 这是引入node的路径函数,使用这个需要使用npm init初始化

    使用npm init文件会生成一个packjson.json文件,这里面有需要的依赖,如果你的文件别人使用拷贝过去之后直接使用npm install 命令会直接根据packjson里的配置依赖,来安装需要的依赖程序.

    css和less依赖loader

    css-loader       对css进行编译        

    style-loader            对编译后的css加载到dom中

    less-loader           对less进行编译

    less        less工具

    <style lang="less" scoped> //在vue文件中使用less或者sass文件时需要在style中加 lang="less/sass"

    图片依赖loader

    .url-loader 像 file loader 一样工作,但如果文件小于限制  配置文件有文件大小限制,如果图片超过限制会报错你

    file-loader 将文件发送到输出文件夹, 

    vue的项目中less和装less-loader的时候经常会因为版本过高报错

    es6语法依赖

    babel-loader     es6转换为es5 

    npm install babel-loader@7 babel-core babel-preset-es2015

    vue依赖

    npm install vue --save

    npm install vue-loader --save-dev 

    npm install vue-template-compiler --save-dev

    注意

    -dev是开发时依赖,只有开发时才需要的东西要加-dev,如果最终项目需要依赖的东西那么就不要加-dev

    plugins插件

    HtmlWebpackPlugins:这个是将index.html也打包到目录文件夹

    安装方法:npm install html-webpack-plugin --save-dev 

    webpack配置方法:new HtmlWebpackPlugin({template:'index.html'})

    uglifyjs-webpack-plugin 压缩js

    安装方法:npm install uglifyjs-webpack-plugin@1.1.1 --save-dev 

    webpack配置方法:new HtmlWebpackPlugin({template:'index.html'})

    配置本地开发服务器

    安装方法:npm install webpack-dev-server@2.9.3 --save-dev

    相关文章

      网友评论

          本文标题:vue依赖文件的安装

          本文链接:https://www.haomeiwen.com/subject/aneuyktx.html