之前的教程里,我们都是使用script标签引入vue,然后我们的代码也写在script标签里面,但是在我们的正常工作中是不会用这种方式开发的,所以现在我们来学习正式工具的使用,vue cli,它是一个vue命令行工具,集成了我们日常工作中常用的功能。
下面请小伙伴们系好安全带,我们的车速要加快了。
不过还没有安装node的小伙伴先请下车,点击链接去安装node。。。
https://nodejs.org/zh-cn/
下面正式发车
1.安装vue cli
打开你的命令行工具,输入安装vue cli的命令
npm install -g @vue/cli
![](https://img.haomeiwen.com/i16912451/9035cbbb86ed5a0a.png)
回车后vue cli就开始安装了,
等vue cli安装完之后,再输入
vue --version
命令行会输出vue cli的版本,说明安装正确了
![](https://img.haomeiwen.com/i16912451/4cc98d040fec1d73.png)
2.使用vue cli创建项目
这一步也非常简单了,根据vue cli官网的文档,我们使用create这个命令来创建项目
vue create hello-world
在create后面的hello-world就是项目名称了,你可以改为你自己喜欢的项目名称,我起了一个叫vue-test的项目
回车后,会出现下面这段内容
![](https://img.haomeiwen.com/i16912451/3d61732afb5cbbd0.png)
这是让你选择你的项目使用哪个vue版本,这时候按键盘的向下箭头,选择vue 3的版本
选择完之后,命令行会自己进行一顿操作,把项目的基本代码和依赖都建好,这个时间可能比较长
等完成以后,你就会发现你的命令行所打开的目录下面多了一个文件夹,名字就是你的项目的名字,
里面的文件结构是这样的
![](https://img.haomeiwen.com/i16912451/89d814b8ff8edb82.png)
先不用管这些文件都是干什么用的,根据命令行里最后两行的提示,先执行
cd vue-test
进入到刚才创建的文件夹,然后
npm run serve
这样就开始执行serve这个命令,我们的项目跑起来了
![](https://img.haomeiwen.com/i16912451/b4c264aa30696fd6.png)
出现这些内容,说明我们的项目已经运行成功,这是在浏览器里打开
http://localhost:8080/
我们就可以看到下面这样,
![](https://img.haomeiwen.com/i16912451/3106b135b25006bf.png)
这节课使用vue cli就到这里了,大家可能会在这个过程遇到各种这样的问题,这时候就要学会用搜索引擎去搜索,找问题的解决办法,会使用搜索引擎也是作为开发者的一个重要技能。
网友评论