Vue介绍(一)--创建Vue基础工程

Vue

  • 创建Vue基础工程
    • Vue工程-创建方式一
      • 1. 在终端中输入**vue ui**
      • 2.终端通过输入的命令,vue开始启动浏览器打开ui页面
      • 3. 准备开始着手创建Vue项目
      • 4.选择创建
      • 5.选择创建项目目录
      • 6.选择手动创建,因为需要选择对应的配置
      • 7.选择下一步,不保留模板,等待创建成功
      • 8.项目创建好了,会出现这个页面,为了测试下创建的项目是否成功,我们需要运行下
      • 9.等待项目启动
    • Vue项目创建方式二
      • 1.控制台输入vue init webpack 项目名称
      • 2.此处有个前期,使用vue init命令需要安装init依赖,安装命令"npm install -g @vue/cli-init"
      • 3.等待安装依赖

创建Vue基础工程

由于近期对知识的渴望,以及未来项目技术的需要,开始准备对Vue这门前端流行的技术进行学习以及个人知识总结进行记录,以上说明仅代表个人理解,如果错误,还请各位大佬指点出来,及时纠正。

Vue工程-创建方式一

1. 在终端中输入vue ui

Vue介绍(一)--创建Vue基础工程_第1张图片
使用vue ui命令需要在vue版本3.0以上才能支持

2.终端通过输入的命令,vue开始启动浏览器打开ui页面

Vue介绍(一)--创建Vue基础工程_第2张图片
Vue介绍(一)--创建Vue基础工程_第3张图片

3. 准备开始着手创建Vue项目

Vue介绍(一)--创建Vue基础工程_第4张图片

4.选择创建

Vue介绍(一)--创建Vue基础工程_第5张图片

5.选择创建项目目录

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200404185442883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzNjk1MDQyNmE=,size_16,color_FFFFFF,t_706.输入项目名,点击下一步
Vue介绍(一)--创建Vue基础工程_第6张图片

6.选择手动创建,因为需要选择对应的配置

Vue介绍(一)--创建Vue基础工程_第7张图片
Vue介绍(一)--创建Vue基础工程_第8张图片

7.选择下一步,不保留模板,等待创建成功

Vue介绍(一)--创建Vue基础工程_第9张图片

8.项目创建好了,会出现这个页面,为了测试下创建的项目是否成功,我们需要运行下

Vue介绍(一)--创建Vue基础工程_第10张图片

9.等待项目启动

Vue介绍(一)--创建Vue基础工程_第11张图片
Vue介绍(一)--创建Vue基础工程_第12张图片
Vue介绍(一)--创建Vue基础工程_第13张图片

Vue项目创建方式二

Vue介绍(一)--创建Vue基础工程_第14张图片

1.控制台输入vue init webpack 项目名称

2.此处有个前期,使用vue init命令需要安装init依赖,安装命令"npm install -g @vue/cli-init"

Vue介绍(一)--创建Vue基础工程_第15张图片
Vue介绍(一)--创建Vue基础工程_第16张图片

3.等待安装依赖

Vue介绍(一)--创建Vue基础工程_第17张图片
Vue介绍(一)--创建Vue基础工程_第18张图片
Vue介绍(一)--创建Vue基础工程_第19张图片

你可能感兴趣的:(Vue)