vue安装教程(node+vuecli+创建vue项目)

一、安装Node.js
下载地址:node.js下载地址vue安装教程(node+vuecli+创建vue项目)_第1张图片

  1. 我下载这会版本是12.14.0这个推荐给大多数人版本
  2. 下载好之后一顿盲安装,点就完了(在下载过程中node会自动配置环境变量,不需要自己配置,后期自己打开cmd终端直接输入命令就可以)
    3.安装完之后输入 node -v ,可以显示自己安装版本 就证明已经安装成功了!
    vue安装教程(node+vuecli+创建vue项目)_第2张图片
    二、通过vue-cli来搭建vue项目
    1、 安装node前提下,打开终端直接输入命令
npm install -g vue-cli 
或者使用国内的淘宝镜像 
npm install -g cnpm --registry=https://registry.npm.taobao.org

2、使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称。
vue安装教程(node+vuecli+创建vue项目)_第3张图片
3、以上步骤完成之后,项目目录结构如下图所示,其中的src目录下的文件,就是我们自己需要使用到的文件了。
vue安装教程(node+vuecli+创建vue项目)_第4张图片
4、 执行 npm run dev 命令,启动项目
vue安装教程(node+vuecli+创建vue项目)_第5张图片
当出现下图时,说明项目启动成功!
启动成功
这时我们可以通过浏览器访问链接 http://localhost:8080 来访问项目了。这时页面如下图:
vue安装教程(node+vuecli+创建vue项目)_第6张图片

到这里新建第一个vue项目步骤就结束了,一顿安装下来开始学习vue的项目构成以及vue的语法吧!
最后感谢各位大佬施舍我知识,借鉴文章,我恬不知耻的抄到我自己博客,抄到手就是我自己的!

你可能感兴趣的:(vue安装教程(node+vuecli+创建vue项目))