新手安装vue-cli脚手架

时间:2022-03-25 13:10:12

首先这片文章借鉴了很多博主的,再此对他们表示感谢。

什么是vue?

Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层,采用自底向上增量开发
的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

什么是vue-cli脚手架?

打个比喻,vue-cli就是Vue的脚手架工具,和我们工地看到的脚手架是一回事,它帮助我们搭建基本的开发环境,好比架子搭建好了,利用它可以搞定目录结构,本地调试,单元测试,热加载及代码部署等,了解到vue-cli后,下面实际做下vue-cli的安装:

    第一步:需要安装node.js    https://nodejs.org/en/      安装最新版本  ;可以在命令行工具内执行: node -v  (检查一下 版本)确定一下是否已将安装 ;

    注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;

    建议:最好在开始之前自己建一个文件夹用来存放,在文件夹中cmd

新手安装vue-cli脚手架

 

新手安装vue-cli脚手架

    第二步:命令行执行 : npm install -g vue-cli    // 加-g是安装到全局;

    安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行;

新手安装vue-cli脚手架

     第三步:执行命令: vue init webpack demo(demo是你新建的项目名称/文件名称) 

啊哦遇到了问题,报错了,百度了一下因为node版本太低,更新一下就好了;

新手安装vue-cli脚手架

  更新之后在重复运行一下命令

新手安装vue-cli脚手架

动打开demo文件夹 可以看到 已经初始化好了 一个基本的项目:

 

 

 

 

新手安装vue-cli脚手架

 

 欢迎各位留言讨论