vue+element-ui快速搭建前端项目

使用vue-cli快速搭建项目使用vue-cli新建项目首先进入你的项目所在的文件夹，输入命令vueinitwebpack初始化项目。例外：命令vueinit需要安装全局插件。请运行undefined@vue/cli-init并重试。请运行npminstall-g@vue/cli-init安装全局vue和脚手架工具，输入命令npmrundev在本地浏览器输入http://localhost:8080查看效果。初始项目文件已生成。使用本地编辑器打开项目文件。*使用element-ui在项目中安装element-ui。我用的是vscode，打开在终端输入如下命令：cnpminstallelement-ui–s在项目中引入element-ui打开main.js文件，修改为如下代码（都可以替换）：importVuefrom'vue'//引入element-uiimportElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'//引入App组件importAppfrom'./App'Vue.config.productionTip=false//使用element-uiVue.use(ElementUI)/*eslint-disableno-new*/newVue({el:'#app',template:'',components:{App}})布局设置修改App.vue文件为如下代码（全部替换即可）：侧边导航布局：在components文件夹下新建一个NavMenu.vue粘贴代码：选项1选项2选项3选项4导航2选项1选项2选项3选项4高级菜单栏：我们需要的功能：一次只能展开一个一级菜单。每次点击二级菜单都可以自动改变路由并跳转到相应的组件。由于路由中也会用到菜单，所以最好将其抽象出来，做成一个配置文件。第1点和第2点比较简单，Element上已经有配置文档：unique-opened:是否只保留一个子菜单expandedrouter:是否使用vue-router模式，开启该模式会使用index作为导航激活时的路径路由跳转修改NavMenu.vue选项1选项2选项3选项4导航二选项1选项2选项3选项4importmenufrom'@/config/menu-config'exportdefault{data(){return{menu:menu}},methods:{handleOpen(key,keyPath){控制台.log(key,keyPath)},handleClose(key,keyPath){console.log(key,keyPath)}}}在componets文件夹下创建一个Header.vue,并在App.vue中引入，Header.vue代码：<样式范围>.head-wrap{}App.vue组件路由和延迟加载在组件中添加四个新文件：BasicContainer.vueBasicLayout.vueFormCheckbox.vueFormRadio.vue修改route/index.js文件，importVuefrom'vue'importRouterfrom'vue-router'importmenusfrom'@/config/menu-config'Vue.use(Router)varroutes=[]menus.forEach((item)=>{item.sub.forEach((sub)=>{routes.push({path:`/${sub.componentName}`,name:sub.componentName,component:()=>import(`@/components/${sub.componentName}`)})})})exportdefaultnewRouter({routes})另外，App.vue文件需要加上router-view看效果：点击菜单，路径跳转，每次都是路由文件加载d分别