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 的代码片段进行运行