VUE学习系列笔记day07

  VUE中文官网：VUE中文官网

  本篇涉及知识： Vue脚手架的学习、Element-UI的基本使用

1.脚手架的基本用法

  作用：vue脚手架可以用于快速生成Vue的项目基础架构，无需进行手动配置。

安装

  控制台安装命令（要先安装node.js）：npm install -g @vue/cli（此命令是安装最新的，如果要指定版本可以使用 npm install -g @vue/cli@3.3.0）；查看当前脚手架版本命令：vue -V；打开图形化界面创建项目命令：vue ui 。

创建vue项目的三种方式

1.基于控制台交互式命令行的方式

  命令：vue create myproject(myproject是项目名称)
  截图流程（执行命令vue create myproject之后）：
  1.1点击上下箭头进行选择，回车选中进入下一步，此处选择手动配置

  1.2

  1.3

  1.4

  1.5

  1.6

  1.7

  1.8

  1.9

  至此配置完成会自行创建vue工程，输入提示命令：

  等待运行成功后：在浏览器中输入访问地址即可

  出现如下界面就代表安装成功：

2.基于图形化界面创建工程

  2.1在控制台中执行命令：vue ui 会自动在浏览器中打开并运行vue图形化界面服务

  2.2

  2.3

  2.4

  2.5注意插件的配置文件保存在自己单独的配置文件选项设置也在这里，别遗漏了

  2.6

  2.7

  2.8

  2.9

3.基于2.x的旧模板创建vue旧项目

  要先安装一个全局包支持旧版本，在执行创建工程，命令为：
  npm install -g @vue/cli-init
  vue init webpack my-project
  之后再如下操作，创建好工程（按照提示命令运行即可）：

Vue手脚架生成项目结构分析

  见此博客：
  https://www.cnblogs.com/goloving/p/8693189.html

Vue脚手架自定义配置

  配置端口与自动打开设置（注意在json中要用双引号包裹变量，不能用单引号）
  1.通过package.json（不推荐，因为package.json是用来管理包配置信息，为了方便维护可以单独定义到vue.config.js配置文件中）

  2.通过vue.config.js配置（和1不能同时配置）：

2.ElementUI组件库使用

  官网地址：ElementUI官网

2.1基于命令行方式安装

  步骤为：

  注意事项：可以在入口文件js中配置，在App.vue根组件或其它组件引用

2.2基于图形化界面自动安装

  步骤为:

  注意事项：配置按需导入

  当配置成功后，在工程中需要使用elementui的地方导入js即可（已经被封装到plugins目录下的element.js文件了）