Vue 安装 vuex sass 和 引入 Jq

简介: Vue 安装 vuex sass 和 引入 Jq

1.安装vuex


1. npm install vuex --save
2. 在src 目录下新建 store 文件夹
3. 在store 中新建 store.js
import Vue from 'vue'
import vuex from 'vuex'
    Vue.use(vuex);
import peinfo from './peinfo.js'
export default new vuex.Store({
        modules:{
            peinfo:peinfo
        }
    })
    peinfo.js
export default {
    state: {
        list: []
    },
    mutations:{
        perinfo(state,data){
          state.list = data.data
        }
    }
}

2. 安装sass


npm install --save-dev sass-loader
npm install --save-dev node-sass
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

3. 引入JQ


1.首先在package.json里的dependencies加入"jquery" : "^3.2.1",
2.npm install jquery -- save-dev
3.找到build文件夹下的webpack.base.conf.js文件,打开,添加:var webpack=require('webpack')
4.在module.exports里输入:
    plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        })  
    ],
5. 在入口文件main.js中输入: import $ from 'jquery'

4.安装axios


1. npm install axios
2. 在mian.js
import axios from 'axios'
import VueAxios from 'vue-axios'
    Vue.use(VueAxios, axios)
相关文章
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
6 0
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
6 0
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
8 1
|
2天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
2天前
|
JavaScript
vue知识点
vue知识点
10 0
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0
|
3天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
3天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据