创建项目

在合适的目录下运行命令：vue create 项目名称

运行：npm run serve
删除App.vue template中的代码(HelloWorld组件的引入和使用)
清除App.vue的样式代码
删除HelloWord.vue
引入全局样式：拷贝样式到项目的src/styles目录下
- 在main.js中引入index.less
- index.less文件中已经引入了reset.less
拷贝图片静态资源到src/assets目录下

下载相关依赖包

 npm i axios vue-router@3
 npm i element-ui -S
 npm i less less-loader@5.0.0 -D

// 引入elenent ui
import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

新建vue.config.js文件，配置关闭eslint语法检查、自动打开浏览器

module.exports={
    lintOnSave:false,
    devServer:{
        open:true
    }
}

配置路由

新建src/router/index.js

// 1.工程化
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


// 2.路由配置
const router = new VueRouter({
  routes: [
    {
      // name  path  component  children redirect meta props
      name: 'login',
      path: '/login',
      // 以后不要使用从内到外的相对路径,而是要基于src目录获取资源
      // @：代表src目录，这是webpack中已经配好的
      component: () => import('@/views/login.vue')
    }
  ]
})

// 3.暴露
export default router

main.js中

import router from '@/router'

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

// App.vue根组件中添加路由渲染的出口

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

项目初始化

创建项目

配置路由