Vue安装以及项目搭建

Vue从入门到入土系列

  • 一只不务正业的Java后端码畜今天又来研究前端Vue了。

1、要搭建运行Vue项目,首先得安装一个东西叫Node。网上有很多教程这里推荐博主使用的菜鸟教程。传送门》》》》

  • 当你安装成功后测试一下安装是否成功,npm包含在Node里面的,一般安装成功就有>>>>如下:
    在这里插入图片描述

2、当把Node.js安装好以后就可以着手创建Vue项目了。由于 npm 安装下载速度特别慢,我们一般可以使用淘宝的镜像及其命令 cnpm来下载Vue以及相关项目依赖。

  • 安装淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 当然npm 版本需要大于 3.0,如果低于此版本需要升级它:
    cnpm install npm -g
    在这里插入图片描述


  • 安装Vue-cli, vue的脚手架。
    cnpm install vue-cli -g
    在这里插入图片描述

  • 然后我们测试一下vue-cli是否安装成功,显示下图表示安装成功。
    vue list
    在这里插入图片描述

3、新建vue项目,首先我们新建项目地址。

  • 我在R盘新建项目,然后进入对应文件夹开始新建项目。
    在这里插入图片描述

  • 新建项目,记得下面三个选No,
    第一个是关闭eslint校验。这个是个代码规范插件。会严格规范你的代码。空格缩进都会报错,一般默认就选No,当让你也可以严格要求自己。手动滑稽。第二个单元测试和第三个是e2e单元测试。默认都是选的No。别人都是选的No,咱也选No吧。
    vue init webpack "项目名称"

在这里插入图片描述


  • cd进入项目包,为你的下载相关vue依赖文件。
    cnpm install

在这里插入图片描述

  • 如果你成功走到这儿说明你已经成功了。我们来试试运行我们新建的Vue项目吧。以下便是项目访问地址。copy到浏览器试试。
    cnpm run dev

在这里插入图片描述


  • 这便是已经成功搭建了。

在这里插入图片描述

  • 我们再来看看我们的项目目录。可以看到一个项目已经搭建好了。继续开发成我们想要的样子。

在这里插入图片描述


  • 一直不务正业的后端码畜。初try vue,非专业。如有贻误望指正。谢谢支持!
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章