创建vue项目步骤(axios,element-ui,router的简单配置)

1. 创建vue项目(这里使用的是HbuilderX创建的vue版本为2.6)

2. 将App.vue里面由原先项目生成的东西清空

3. 用npm下载axios,element-ui,router

    npm run build  //构建项目
    npm i axios element router@3 //npm下载

(因为当前vue的版本需要指定路由的版本)

(可能会报错,如果没有报错可以不用管)

    在终端输入 npm cache clear --force，然后重新运行 npm i axios element router@3

4. 配置项目里面的main.js文件

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

//导入router路由
import router from './router' 
/*引入element-ui*/
import ElementUI from 'element-ui';
// 引入样式
import 'element-ui/lib/theme-chalk/index.css';

/*引入axios:操作ajax*/
import axios from 'axios';
import qs from 'qs';

// 使用element
Vue.use(ElementUI)
// 给vue的实例绑定上axios
Vue.prototype.axios=axios;
Vue.prototype.qs = qs;

// 关闭生产提示
Vue.config.productionTip = false

/*绑定请求的服务器的全局路径:绑定网关地址*/
Vue.prototype.axios.defaults.baseURL = "http://localhost:8888/api/";

new Vue({
    router,
  render: h => h(App),
}).$mount('#app')

5. 在项目里面新建一个文件夹views,用来放组件,例如这里有一个登录页面

6. 在项目中新建一个文件夹router,再新建一个index.js用来使用路由功能

index.js的代码

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)  //使用

//导入components文件夹内的登录vue文件 
import Login from '../components/Login.vue'

//路由配置中心 
export default new Router({
    routes:[
        {
            //匹配路径
            path:'/',
            //名称
            name:'Login',
            //组件
            component:Login//配置Login.vue为起始页
        }
    ]
})

7. 前往element-ui官网借取组件

https://element.eleme.cn/#/zh-CN/component/container

Login.vue的代码

8. 配置路由出口

9. 控制台运行

运行vue 的项目 默认是8080端口

    npm run dev 
    npm run serve
   //一种不行换另一种

10. 修改网页标题和图标

ok 配置最基本的vue项目这样就已经搭建好了