vue项目环境搭建

2018/03/06 20:04
阅读数 17

安装node.js

$ npm install -g vue-cli $ vue init webpack my-project

?Project name ?Project description ?Author ?Use ESLint to lint your code?(y/n) ?Setup unit test with Karma + Mocha?(y/n) ?Setup e2e tests with Nightwatch?(y/n)

第一行问你项目名称,输入 my-first-vue-project 第二行问你项目描述,输入 this is my vue 第三行问作者的名字,输入 你自己的名字就好 第四、五、六行都直接在后面输入 NO 。

$ cd my-project $ npm install $ npm run dev

===element ui===== npm i element-ui -S

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';

Vue.use(ElementUI);

new Vue({ el: '#app', render: h => h(App) });

===mint ui=========

Vue 1.x

npm install mint-ui@1 -S

Vue 2.0

npm install mint-ui -S

// 引入全部组件 import Vue from 'vue'; import Mint from 'mint-ui'; Vue.use(Mint);

============================================================= ? Target directory exists. Continue? Yes ? Project name my-project-element-ui ? Project description A Vue.js project ? Author yancy777 1021600964@qq.com ? Vue build standalone

? Install vue-router? No ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run npm install for you after the project has been created? (recommended) npm

++++++++++++++++++++++++++++++++++++++++++++++++++++ vue-cli 引入axios及跨域使用:https://www.jianshu.com/p/e36956dc78b8; vue-axios :https://www.npmjs.com/package/vue-axios Axios 中文说明:https://www.kancloud.cn/yunye/axios/234845

vue2.0如何使用axios main.js:

import axios from 'axios' Vue.prototype.$http = axios 其他地方使用的话 如同使用 vue-resource 一样

this.$http.get(URL).then(response => { // success callback }, response => { // error callback })

1.对于get请求 axios.get('/user', { params:{ name:"virus"
} }) 2.对于post请求 axios.post('/user',{ name:"virus" }) 3、 一次性并发多个请求

function getUserAccount(){ return axios.get('/user/12345'); } function getUserPermissions(){ return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(),getUserPermissions()]) .then(axios.spread(function(acct,perms){ //当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果 })) 4.axios可以通过配置(config)来发送请求

//发送一个POST请求 axios({ method:"POST", url:'/user/1111', data:{ name:"virus" } });

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部