vue脚手架、Vuex、sass、axios、less的安装使用

一、安装Vue脚手架:

安装vue-cli

npm install -g vue-cli

建立项目名

打开文件所在目录,在安装位置打开cmd
vue init webpack 文件名

初始化:

cd 文件名       跳转到文件目录下
npm install
npm run dev
打开浏览器:localhost:8080  即可打开项目

打包文件 :

npm run build  
浏览器打开  dist中的index.html
修改config中index.js   '/' => './' 
npm run build

二、Vuex的使用

安装Vuex

cd 项目
npm install vuex --save 

1> . store/store.js 中:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
})
export default store

2>. main.js ------方法及数据

import store from './store/store.js'
new Vue({
  store,
  state:{
    arr: [],
    tabIndex: ''
  },
  mutations:{
    getIndexs (state, value) {
      state.tabIndex = value
    }
  },
  actions: {
    getIndexs2 (context, value) {
      context.commit('getIndexs',value)
    }
  getters:{}
})

3> . App.vue ---------- 调用数值和方法

<template>
<ul>
  <li v-for="(item, index) in sum" @click="getIndex(index)">{{item}}<li>
  {{tabIndex_a}}
</ul>
</template>
<script>
import store from './store/store.js'
export default {
  name: 'App',
  store,
  computed: {
    sum () {
      return this.$toute.state.arr
    },
    tabIndex_a (){
      return this.$store.state.tabIndex; // 获取公共的值
    }
  },
  methods: {
    getIndex (index) {
      this.$toute.commit('getIndexs', index) // 调用公共事件
    }
  }
}
</script>

三、scss

安装:

npm install --save-dev sass-loader
npm install --save-dev node-sass  //sass-loader依赖于node-sass

main.js 引用

import './components/css/common.scss'

四、axios

1、 安装

npm install axios  
npm install --save axios vue-axios

2、main.js 中:

import axios from 'axios'
import VueAxios from 'vue-axios' 
Vue.use(VueAxios, axios)

3 、组件中(以json对象为例):

import Axios from 'axios'
created() {
    Axios.get("../../static/data.json").then((res) => {
       console.log(res.data)
     })
 }

五、less用法

1、安装:

npm install less less-loader --save-dev

2、修改:
build/webpack.base.conf.js 中,添加

module.exports = {
    module: {
        rules: [
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

3、使用

<style lang="less">
.box {
   p {
        color: red;
   }
}
</style>

https://blog.csdn.net/zmhawk/article/details/75209161

4、公共less文件(vue组件里)

<style lang="less">
  @import "../assets/css/detail.less";
</style>

less文件:

.box {
   p {
      font-size: 16px;
   }
}

//www.greatytc.com/p/bdd4dd2c098b

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容