vue脚手架-vuerouter-vuex-sass-axios-vant-elementui集成开发环境

vue项目从构建到集成所需要的内容，达到便捷开发的功能

一.创建项目结构目录

1.使用脚手架创建，在命令行中输入 vue create vue-vvv

2.了解如何启动项目

创建项目目录后最后有上图的提示,接着上面的操作继续在命令行中输入
cd vue-vvv 进入项目所在的根目录下
npm run serve 启动项目

在本机上就可以通过浏览器访问：http://localhost:8080/

3.了解项目的结构目录

基础的结构如下：
node_modules:npm(cnpm)下载项目环境的各种依赖包
public:静态文件
src:源码目录
assets:图片资源等
components:vue公用组件
App.vue:页面入口文件
main.js:程序入口文件，加载各种公共组件
package.json:项目配置文件
README.md:项目的说明文件。

二.集成vue-router,实现地址栏的路由跳转显示

1.安装vue-router
命令行安装:cnpm install vue-router -S （-S——项目依赖）

2.配置路由文件
在src目录下新建router.js
router.js

import  Vue  from  'vue';
import   VueRouter  from  'vue-router';
//注册路由
Vue.use(VueRouter);
//导入vue组件
const  Home =() => important  ('./views/home.vue');
//新建路由实例;
const  router = new   VueRouter({
     routes:[
     //{path:路由路径,compnent:组件名}
       {path:'/home',component:Home},
     ]
});
//对外导出
export  default  router

3.vue全局使用路由
在入口文件main.js中配置,配置文件有一个默认结构
main,js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;
import router  from './router';//导入路由实例
new Vue({
  router,//挂载路由实例
  render: h => h(App),
}).$mount('#app')

三.集成vuex状态管理

1.安装vuex状态管理
命令行输入:cnpm install vuex -S （-S——项目依赖）

2.配置状态管理
在src目录下,新建store文件，存放状态管理的配置文件
在store目录下新建index.js

import  Vue  from  'vue';
import  Vuex  from  'vuex';//引入vuex
//注册vuex
Vue.use(Vuex);
//创建vuex实例
const  store =new  Vuex.Store({
     state:{
        //数据中心  类似 vue实例的data
     },
     mutations:{
        //方法,推荐只使用mutations中的方法改变state的数据
     },
     getters:{
       //计算属性,类似vue实例中的computer
     },
     actions:{
       //异步处理 推荐获取的数据不直接改变state的值，通过mutations中的方法改变state
     }
})

export  default  store

3.vuex全局使用
main.js配置

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import router  from './router';//导入路由实例
import  store  from  './store/index';//导入状态管理实例
new Vue({
  router,//挂载路由实例
  store,//挂载状态管理实例
  render: h => h(App),
}).$mount('#app')

四.sass安装和使用

1.安装sass
命令行输入:cnpm install sass sass-loader -D (开发依赖)

2…sass的使用
sass官网
在vue组件中使用

<style  lang='scss' >
 //sass语法写样式
</style>

五.axios安装使用

1.axios的安装
axios做为替代ajax的异步处理方案
命令行输入: cnpm install axios
axios介绍仔细查看详细

2.axios的使用

fetch.js

import  axios  from  'axios';

const  fetch=axios.create({
       baseURL:'',//请求的根目录地址
       timeout:7000,//请求多久后超时
       header:{},//各种请求头设置
})
//请求拦截器
axios.interceptors.request.use(function (config) {
    //继续发生请求
    return config;
  }, function (error) {
    //发生错误返回错误
    return Promise.reject(error);
  });
 
// 接收拦截器
axios.interceptors.response.use(function (response) {
   //返回的结果
    return response;
  }, function (error) {
      //发生错误返回错误
    return Promise.reject(error);
  });

//导出 axios实例
export  default  fetch

3.方便全局调用axios请求
封装一个api.js挂载在vue原型上
api.js

import  fetch  from  './fetch';

function  getList(params){
      return  fetch({
          url :'',
          method:'GET',
          params:params,
      })
}
function  getApp(params){
    return  fetch({
        url :'',
        method:'POST',
        data:params,
    })
}

export default {
    getList,
    getApp,
}

配置main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import router  from './router';//导入路由实例
import  store  from  './store/index';//导入状态管理实例
import  http from  './utils/api';
Vue.prototype.$http=http;//挂载$http在vue原型上，所有vue组件都可以访问
new Vue({
  router,//挂载路由实例
  store,//挂载状态管理实例
  render: h => h(App),
}).$mount('#app')

4.vue组件调用api中的方法

this.$http.getList(参数)

六.vant组件库安装使用

1.vant安装
命令安装:cnpm install vant -S （项目依赖）
**cpm i babel-plugin-import -**D 配置按需引入

配置根项目目录下的 babel.config.js中对象添加配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

2.vant组件使用
在vue组件中，导入对应需要的组件名,转化局部组件，即可在template中使用

<template>
<div>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
</diV>
</template>



important {Button}  from 'vant';

 export default {
     components:{
     //将导入的vant组件 转化成局部组件  即可直接使用对应的代码组件名
         [Button.name]:Button,

     }
 }
 

七.element-ui组件库安装使用

1.element-ui安装
命令行安装: cnpm i element-ui -S

2.element-ui配置和使用
在main.js中配置
main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import router  from './router';//导入路由实例
import  store  from  './store/index';//导入状态管理实例
import  http from  './utils/api';
Vue.prototype.$http=http;//挂载$http在vue原型上，所有vue组件都可以访问

//element-ui全局使用配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.arguments(ElementUI);
new Vue({
  router,//挂载路由实例
  store,//挂载状态管理实例
  render: h => h(App),
}).$mount('#app')

组件中使用:
home.vue

<template>
  <div>
  //直接使用element-ui组件库的组件
    <el-button disabled>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
  </div>
</template>

<script>

export default {
   
      
}   
</script>

<style  lang='scss' scoped>

</style>

这样就从构建项目到配置需要用到的东西就完成