vue 基本操作流程

Vue

1、必须安装node.js，安装git（这个可以不用，不过习惯了）
2、安装webpack·npm install -g webpack
3、使用淘宝镜像（用cnpm命令代替npm，这个也可以不用安装，只是使用npm安装依赖包是会慢那么一点）：npm install -g cnpm --registry=https://registry.npm.taobao.org
4、安装vue的脚手架工具 npm install -g vue-cli
5、创建项目：vue init webpack vue 然后根据需求进行操作提示（Eslint是语法规则和代码风格的检查工具，会自动检测当前项目的代码是否符合预设的规则，如果你的代码写得不符合预设的规则会报错）

cd vue
npm install //根据package.json安装依赖包
npm run dev //运行项目

axios

1.进入项目运行命令，cnpm install axios --save
2.在需要使用时引入

import Axios from 'axios'

3.简单封装axios

import axios from 'axios'

const http = (obj) => {
    
    
    return new Promise((resolve, reject) => {
    
    
        // 判断请求方式
        if (obj.api == 'post') {
    
    
            axios.post(obj.url, 
                obj.data, {
    
    
               	headers: {
    
     token: obj.header }
              })
                .then(res => {
    
    
                    resolve(res)
                });
        } else {
    
    
            axios.get(obj.url, {
    
    
                params: obj.data,
                headers: {
    
     Token: obj.header } //设置header信息
            })
                .then(res => {
    
    
                    resolve(res)
                });
        }

    })
}

export default http

main.js

import http from './store/http'                       //http请求
Vue.prototype.$https = http

使用

   var obj = {
    
    
        url: this.$store.state.httpurl + "account/login",
        api: "post",
        data: {
    
    
          username: this.logoName,
          password: this.logoPassd
        }
      };
      this.$https(obj).then(res => {
    
    })

Vuex

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。
npm install vuex --save
要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。
2、新建一个store文件夹，并在文件夹下新建index.js文件，文件中引入我们的vue和vuex。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    
    
    state: {
    
    
        http: 'http://xxxx/xxx/xxx/api/',
        httpurl: 'http://xxxx/xxx/xxx/api/',
    },
    mutations: {
    
    },
    actions: {
    
    },
})
export default store

3.main.js引入

import store from './store/index' 
Vue.prototype.$store = store 

4.简单使用

console.log(this.$store.state.http)

scss

1.用npm安装sass的依赖包（可使用cnpm淘宝镜像）

npm install --save-dev sass-loader
npm install --save-dev node-sass

2.在build目录下找到webpack.base.conf.js文件，在module的rules中插入以下代码

	{
    
    
	       test: /\.sass$/,
   	    loaders: ['style', 'css', 'sass']
	},

3.使用

 	 <style lang="scss">

4.如果使用报错，可能是scss版本过高。卸载当前版本，安装较低版本使用

卸载

npm uninstall sass-loader

安装低版本

npm install [email protected]

如果使用vue-element-admin安装完依赖出现Cannot find module 'node-sass’这个问题，没法正确打开登录界面，一般是因为node中缺乏“node-sass”这个组件，安装这个组件即可，使用这个指令

npm install sass-loader node-sass webpack --save-dev

Element - UI

1.安装

	npm install element-ui --save

2、在main.js文件中 引入 element 组件

  	import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'

    Vue.use(ElementUI)

3.然后在项目中插入Element - UI 的代码片段进行运行