4.Vue脚手架4.1Vue脚手架的基本使用Vue脚手架用于快速生成Vue项目基础设施，其官网地址为：地址步骤一、安装Vue脚手架：npminstall-g@vue/cli基于脚手架创建vue项目//1.基于交互式命令行创建新版vue项目vuecreatemy-project//2.基于图形界面vueui创建新版vue项目//3.基于旧模板2.x的，创建一个老的vue项目npminstall-g@vue/cli-initvueinitwebpackmy-project这里使用图形界面创建一个vue项目：命令行输入：vueui4.2vue脚手架生成的项目结构分析node_modules依赖包目录public静态资源目录src源代码目录src/assets资源目录src/components组件目录src/views视图组件目录src/App.vue根组件src/main.js入口jssrc/router.js路由jsbabel.config.jsbabel配置文件4.3Vue脚手架自定义配置1.通过package.json配置项目//必须是符合json语法的"vue":{"devServer":{"port":"8888","open":true}}注意：不推荐这种配置方式。因为package.json主要用来管理包的配置信息；为了方便维护，建议在vue.config.js配置文件中单独定义vue脚手架相关的配置。2.通过单独的配置文件配置项目①在项目根目录下创建文件vue.config.js②在该文件中进行相关配置覆盖默认配置//vue.config.jsmodule.exports={devServer:{端口：8888}}5。Element-UI基本使用Element-UI：一套基于Vue（这里使用Vue2.0）的桌面端组件库，供开发者、设计师和产品经理使用。官网地址为：地址1.基于命令行手动安装①安装依赖包npmielement-ui–S②导入Element-UI相关资源//src/main.js//导入组件库importElementUIfrom'元素用户界面';//导入组件相关样式import'element-ui/lib/theme-chalk/index.css';//配置Vue插件Vue.use(ElementUI);//src/App.vue
