Vue脚手架,element-ui基本使用

vue脚手架用于快速生成vue项目基础架构，其官网地址为：https://cli.vuejs.org/zh/

安装脚手架

1. 终端执行命令：npm install -g @vue/cli

创建vue项目

**方法一：**基于交互式命令行的方式，创建新版vue项目，

1. 执行命令：Vue create my-project //my-projec为项目名。
2. 按照提示内容选择创建方式。
3. 创建完成后cd到项目中可以执行npm run serve命令运行项目
4. 运行完成后可以访问生成的地址查看创建的项目

**方法二：**图形化方式创建vue项目

1. 进入cmd终端执行vue ui命令。
2. 进入控制面板板 》创建新项目 》选择配置{babel，Router，Vuex ，linter/Formatter，使用配置文件。必选} 》配置文件{ESLint + Standard config。必选 } 》保存创建设置（可以不设）》完成
   **方法三：**创建旧模板vue项目。不推荐使用。

脚手架生成项目的结构

脚手架生成项目目录解析

1. node_modules：依赖包目录
2. public：静态资源目录
   2.0 静态资源文件，如首页和图标
3. src：组件原码目录
   3.1 assets：资源，比如放样式表，图片
   3.2 components：组件
4. babel.config.js：babel配置文件
5. views： 视图组件
6. app.vue：所有组件的跟组件
7. main.js：打包入口文件
8. router.js：路由配置

脚手架生成项目自定义配置

1. package.json
   需要运行时自动打开浏览器：终端执行：npm run server后自动打开浏览器的配置。
   ***方法一：（不推荐）***因为package.json主要用来管理包的配置信息，为了方便维护，推荐将vue脚手架相关的配置单独定义到vue.config.js配置文件中，在package.json最后加上：

"vue": {
"devServer":{
		"port": 8888 //指定端口号
		"open": true //打包完成自动打开浏览器
	}
}

方法二：

1. 创建vue.config.js
2. 创建配置对象

	module.exports = {
		devServer: {
			open:true,
			port:8888
		}
	}

Element-ui的基本使用

方法一：
element-ui：是一套为开发者、设计师、产品经理准备的，基于vue 2.0 的桌面端组件库
网址：http://element-cn.eleme.io/#/zh-CN

1. 安装: npm install element-ui安装相应的依赖包
2. 导包：在main.js使用 inport ElementUI from 'element-ui’导入依赖包
3. 导入样式： 在main.js中使用 inport 'element-ui/lib/theme-chalk/index.css’导入样式
4. 把插件挂在到Vue项目上：在main.js中使用Vue.use(ElementUI)挂在插件
   如：

 inport ElementUI from 'element-ui'
 inport 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)

方法二：基于图形化页面（推荐）

1. 运行vue ui命令，打开图形化界面
2. 通过vue 项目管理器进入具体的项目配置面板
3. 点击插件 》添加插件，进入插件查询面板
4. 搜索vue-cli-plugin-element并安装
5. 配置插件，实现按需导入，从而减少打包后项目的体积
   在插件配置右边的选择栏中选择按需导入，import on demand