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文件了)