超详细创建配置前端vue全过程

1.新建vue项目

vue create 项目名

选择你要创建的vue版本，这里我选择创建vue2[上下键调整，回车选择]

2.接下来我们在vs code 上面 打开刚刚创建的项目

运行 npm run serve

进入之后看到这个页面证明我们的创建是成功的

3.然后把项目先停止一下，装一些插件

我们一般在vue里面发送请求的时候都是用axios

npm install -s axios

npm install -s vue-router@3 (因为是vue2，所以要指定版本)

npm install -s element-ui（饿了么团队的插件）

在这里面查看，是否安装成功

4.接下来开始配置路由，新建一个home.vue做测试

 没有这个插件的可以选择装一下

 然后页面输入v2，自动补充

随便写个内容以便于测试效果，记得把最下面那个lang删除，不然跑不起来

在src里面新建目录，命名router ,里面新建文件index.js模块

 router里面配置

//主路由
import Vue from "vue"

//路由组件
import VueRouter from "vue-router"

//导入home组件
import Home from "../components/Home.vue"

Vue.use(VueRouter)

//创建路由对象
const router = new VueRouter({
    //配置对象
    routes : [
        {
            path:"/home",
            component: Home
        },
    ]
})

//暴露
export default router

然后在入口 main.js里面配置

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

Vue.config.productionTip = false

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

最后在app.vue里面 输入，调用

<router-view></router-view>