Vue项目的创建

#创建vue


vue是啥就不多说了,在官网(https://cn.vuejs.org/)上都有介绍,简单的介绍一下vue项目构建的流程,
## vue-cli创建项目
这是一个脚手架工具,通过这个脚手架工作方便快捷的创建vue的项目但是在创建的时候还需要对node版本有一定的要求
### 安装
安装vue cki 4以上的版本需要node.js版本8.9以上的版本(在这里提一下 我们可以将node.js理解为一个“平台”,一个模块化的JavaScript)

  1. 安装node,在官网下载安装包https://nodejs.org/en/然后安装正常软件的方式安装即可,在安装好后通过 node -v查看一下爱自己的node版本号(一般安装的都是最新的版本)这个版本大于8.9以上就好

2.安装脚手架vue-cli
npm install -g @vue/cli 通过这个命令进行脚手架的下载(因为我以前有这个所以就不进行下载了 cnpm相对于npm来说稍微网速快点这个是国内的一个镜像 i 就是install的简写)CTRL+CC可以停止当前执行的任务
安装号之后可以用过 -v这个指令检查一下自己的版本号的
vue脚手架的版本号
### 创建项目
上面的准备工作搞定之后就可以开始创建项目了

  1. 使用命令创建vue项目
    vue create 项目名字 (全小写不要有空格)
    输入这个命令后就正式开始创建这个项目了
    在这里插入图片描述
    2.进入了项目的选项菜单中在这里我们选择最后一个手动配置项目在这里选择我们需要用到的配置项目

在这里插入图片描述
3.接下来这些配置根据自己的需求进行选择,键盘的上下左右来选择然后空格决定是否选择,选好之后回车进入下一步在这里插入图片描述
4.这一步是选择vue的版本目前vue分为2.x和3.x
在这里插入图片描述
5.接下来就是选择路由的模式 n y都可以一个history,一个hash
在这里插入图片描述
6.emmm接下来就是选择css预处理根据自己的需求进行选择
在这里插入图片描述
7.选好自己需要的预编译语言之后就是选择是否保存这个预设如果保存的话下一次就会在开始选择的时候有这个设置好的配置选项这里毕竟是练习我们不进行保存
在这里插入图片描述
8.然后回车之后出了这个界面等待创建下载是一个比较漫长的过程…,(?Pick the package manager to use when installing dependencies:如果在上一步出现这个就是选择一个包管理工具一般我使用npm)
在这里插入图片描述
9.当下载完成之后就会出现两个命令,
在这里插入图片描述
10.我们需要先使用cd myapp(这个一般是自己定义的项目名字)这个命令进入刚刚创建好的目录之中,在这里插入图片描述
11.然后通过npm run serve启动这个项目
在这里插入图片描述
在这里可以通过vue ui这个可是换管理启动项目和上面那个没太大的区别就是多了一个可视化的管理在这里插入图片描述
可视化的项目管理界面

12.在浏览器中输入上面的任意一个地址就可以看到我们创建好的这个项目了
在这里插入图片描述

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值