vue-cli基础安装配置_vue-cli装css-loader-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_20896193/article/details/87367898

本文详细介绍Webpack的初始化配置步骤，包括npm依赖安装如axios、jQuery、Vuex、css及less加载器等，并讲解如何配置Webpack以支持Sass、Less等样式预处理器，以及状态管理和Jquery的全局引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##webpack初始化配置
第一步：
npm install 安装npm依赖
npm install axios 安装axios依赖
cnpm install jquery --save-dev 安装jq依赖
npm install vuex --save  安装axios状态管理依赖
npm install css-loader style-loader --save-dev  安装css依赖
npm install less less-loader --save 安装less依赖
npm install --save-dev node-sass  安装sass的依赖包
npm install weixin-js-sdk --save //wx是引入的微信sdk
npm install create-keyframe-animation --save// 安装vue中用的的动画库，详细方法在csdn的收藏里
第二步：
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
jq配置：
webpack.base.conf.js文件下
  1.头部引入webpack:
    'use strict'
    const webpack = require('webpack')

  2.plugins: [
    new webpack.ProvidePlugin({  //引入Jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery':'jquery'
    })
  ]

1.安装状态管理

npm install vuex --save

import Vuex from 'vuex'
import store from './store/store

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

store.js文件下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    baseurl:window.location.host,
    count:0,
    scene:'load',
  },
  mutations:{
    increment:state => state.count ++,
    decrement:state => state.count --,
  }
})

2：安装less配置

第一步：

cnpm install css-loader style-loader --save-dev

{

test: /\.css$/, //这是注释掉的模块，一开始很疑惑加入css的编译模块马上就报错了，注释掉之后sass代码照样可以成功编译。

loader: ["vue-style-loader", "css-loader"]

},

安装less依赖，npm install less less-loader --save

第二步：

修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},