一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第11天,点击查看活动详情。
我要一步一步往上爬~大家好,今天我们来一起学习一下Vue脚手架
定义:
Vue CLI ( Command Line Interface),命令行接口工具,翻译委Vue脚手架更口语化,它是 Vue 官方提供的标准化开发工具,也可以称为开发平台。我们写完的.vue文件需要借助它做翻译,得以让浏览器识别我们的意图。
初始化具体步骤
1. 第一步(第一次执行时):全局安装 @vue/cli包
电脑上就会多出一个vue都命令,以后可以通过该命令直接创建脚手架。
安装命令:cmd中输入 npm install -g @vue/cli
- 注意:最好配置淘宝的镜像,不然会出现下载缓慢或者终端的问题:
npm config set registry https://registry.npm.taobao.org
安装成功后的提示,警告是可以不用管的:
2. 第二步:创建测试项目
关掉安装成功的界面,重新打开一个cmd界面,进入到你想创建项目的文件夹中,这里我新建里一个test文件夹并进入
输入vue create test命令,这里我们选择了Vue2版本,babel是用于ES6到ES5的转换的,eslint的作用是检查JS的语法合理性。
创建成功后,会出现如下界面:
3. 第三步:启动项目
通过npm run serve启动项目,现在就开始编译代码量,不用我们便携代码,里面是有提供一个helloworld的例子给我们的
启动成功后,出现如下界面
我们在浏览器输入它显示的网址:http://localhost:8080/就可以看到官网为我们提供的HelloWorld实例了。
总结
这一篇文章展示了如何安装脚手架,以及安装过程中的注意点,结合结果页面,可以一步步的跟着操作,如果有疑问,欢迎在评论区和我交流!~