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点击上下箭头进行选择,回车选中进入下一步,此处选择手动配置
VUE学习系列笔记day07

  1.2
VUE学习系列笔记day07

  1.3
VUE学习系列笔记day07

  1.4
VUE学习系列笔记day07

  1.5
VUE学习系列笔记day07

  1.6
VUE学习系列笔记day07

  1.7
VUE学习系列笔记day07

  1.8
VUE学习系列笔记day07

  1.9
VUE学习系列笔记day07

  至此配置完成会自行创建vue工程,输入提示命令:
VUE学习系列笔记day07

  等待运行成功后:在浏览器中输入访问地址即可
VUE学习系列笔记day07

  出现如下界面就代表安装成功:
VUE学习系列笔记day07

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

  2.1在控制台中执行命令:vue ui 会自动在浏览器中打开并运行vue图形化界面服务
VUE学习系列笔记day07

  2.2
VUE学习系列笔记day07

  2.3
VUE学习系列笔记day07

  2.4
VUE学习系列笔记day07

  2.5注意插件的配置文件保存在自己单独的配置文件选项设置也在这里,别遗漏了
VUE学习系列笔记day07

  2.6
VUE学习系列笔记day07

  2.7
VUE学习系列笔记day07

  2.8
VUE学习系列笔记day07

  2.9
VUE学习系列笔记day07

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

  要先安装一个全局包支持旧版本,在执行创建工程,命令为:
  npm install -g @vue/cli-init
  vue init webpack my-project
  之后再如下操作,创建好工程(按照提示命令运行即可):
VUE学习系列笔记day07

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

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

Vue脚手架自定义配置

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

  2.通过vue.config.js配置(和1不能同时配置):
VUE学习系列笔记day07

2.ElementUI组件库使用

  官网地址:ElementUI官网

2.1基于命令行方式安装

  步骤为:
VUE学习系列笔记day07

  注意事项:可以在入口文件js中配置,在App.vue根组件或其它组件引用
VUE学习系列笔记day07

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

  步骤为:
VUE学习系列笔记day07

  注意事项:配置按需导入
VUE学习系列笔记day07

  当配置成功后,在工程中需要使用elementui的地方导入js即可(已经被封装到plugins目录下的element.js文件了)
VUE学习系列笔记day07

上一篇:Day07_面向对象


下一篇:Python学习之数据类型的使用及内置方法Day07