vue 笔记

Node.js安装

安装node.js

引入jQuery

var $ = require('jquery');
window.$ = $;

Vue CLI 安装与项目初始化

安装vue-cli
npm install -g vue-cli
vue init webpack 文件夹名
在安装文件夹下npm install安装第三方模块
npm run dev 启动应用
npm -V 大写V

Vuex 安装

安装vuex
npm install vuex --save

定义Vuex容器

定义容器
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
let store = new Vuex.Store({
state: '0',
})
export default store

在Vue实例中注入Vuex

注入根实力
import store from './store/store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
console.log(this.$store)

Axios 安装

安装axios
npm install axios

在Vue中使用Axios

在vue中使用axios
npm install axios
npm install axios vue-axios --save
在跟下引入这两个插件
import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Axios, vueAxios)

在需要的模块引入
import Axios from 'axios'
Axios.post('https://admin.cc9950.info/api/login').then((res) => {
console.log(res)
}).catch(() => {})

代码规范

var tese = true // 必须前后空格
'no-unused-vars':0 // .eslintrc文件

// Do not use 'new' for side effects 错误时
// 缺少/* eslint-disable no-new */ 可以绕过规则检查

Vue 实例和方法

$options // 相当于vue实力vm 里面包括一些方法 和 自定义方法
this.$options.methods.test2()
this.$options.data().message

vue 绑定this
this.$options.methods.test1.bind(this)()

Vue中的数组操作

Array.apply(null, {length: 20}).map(function () {
return create('div','2')
})

Vue 全局引入scss

Vue 全局引入scss
npm install sass-resources-loader --save-dev

// 在build/utils.js中
// 然后把scss: generateLoaders('sass')替换成如下代码
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/scss/color.scss')
}
}
),