安装Vue 和 node 及 创建一个Vue 项目

  • 一 下载node.js安装包
    • 1 下载资源包,然后安装
    • 2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成
    • 3 检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果
    • 4 检测node和npm 版本 输入指令 node --version 和 npm --version
  • 二 安装vue
    • 1 全局安装cli脚手架工具
  • 三 创建一个vue项目
    • 1 创建一个基于 webpack 模板的新项目
    • 2 运行测试

一 下载node.js安装包

node官方网址
https://nodejs.org/en/download/

1 下载资源包,然后安装

2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成

3 检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs;
C:\Users\rg\AppData\Roaming\npm

C:\Program Files\nodejs\ 看到有关node代表路径没有问题了

4 检测node和npm 版本 输入指令 node --version 和 npm --version


二 安装vue

1 全局安装cli脚手架工具

vue之所以好用,这个脚手架工具有很大功劳,它帮助我们创建,打包项目,就是个小助手
npm install --global vue-cli (-global 意思是全局安装 这样Vue会安装到node 的文件夹下 否则会安装到 当前目录)

全局安装 vue-cli

过程中可能会有些警告但是是正常的,最后输入命令
vue --version 有版本显示则脚手架安装成功

顺带一提,在最新的cli3版本中vue的cli这个脚手架工具做出了可视化的图形工具,这里给大家看看

执行命令 vue ui 就可以啦

下面是它图像化的样子,许多依赖,插件在这里都可以直接下载安装,非常方便

三 创建一个vue项目

如果下载了cli3的同学,直接在它的图形化界面就可以创建了,下面讲讲怎么用命令行创建

1 创建一个基于 webpack 模板的新项目

vue init webpack my-project my-project(项目文件夹名)

然后出现一堆信息的填写,填完就好了
(项目名称)
(项目描述)
(作者)…
这里值得注意的是,==should we run npm install… ==(这句话是在问是否在工程创建后就去跑 npm 安装依赖 这里面有几个选项 第一个是【是】 也可以选最后一个 稍后自己就安装依赖 即 在命令行执行npm install 命令 ),一般建议选是就好了,因为后面也会用到

然后安装完成

2 运行测试

进入文件夹 执行运行命令

cd project2

npm run dev

然后打开浏览器就可以啦

安装Vue node 及 创建一个Vue 项目相关推荐

  1. 怎么样用vue ui来创建一个vue项目

    1.在命令行中输入vue ui点击回车(前提是你的环境已经配置好了) 2.自动弹出一个网页,点击中间的创建分类栏目,并选择好文件夹目录 3.点击在此创建新项目 4.输入项目的名称点击下一步按钮 5.选 ...

  2. 第三节:创建一个Vue实例,超简单

    最近事多,更新稍慢了点,距离第二节推送快一周了. 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么, ...

  3. 使用VSCode创建一个Vue项目

    使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...

  4. Vue.js 学习笔记十二:Vue CLI 之创建一个项目

    目录 创建一个项目 创建一个项目 运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...

  5. 使用webpack脚手架创建一个vue项目

    使用webpack脚手架创建一个vue项目 前言介绍 前期环境准备 开始创建项目 实例 交流 前言介绍 创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建 ...

  6. 如何创建一个vue项目

    首先要准备好node.js  npm,vue-cli 创建一个vue项目,使用脚手架创建具体命令如下 vue init webpack 项目名称 然后回车 Project name  项目名称   ( ...

  7. 从零开始创建一个vue项目 1

    从零开始创建一个vue项目 创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...

  8. vue+node+mongodb 搭建一个完整博客

    Vue + Node + Mongodb 开发一个完整博客流程 前言 前段时间刚把自己的个人网站写完, 于是这段时间因为事情不是太多,便整理了一下,写了个简易版的博客系统 服务端用的是 koa2框架 ...

  9. Babylonjs入门02——VsCode+vue+babylonjs开发第一个babylon项目程序

    Babylonjs入门02--VsCode+vue+babylonjs开发第一个babylon项目程序 1 环境搭建 2 创建vue项目 3 基于vue项目写第一个babylon项目 4 下一期再见 ...

最新文章

  1. 834. Sum of Distances in Tree
  2. IDEA通过git怎么回滚到某个提交节点或某个版本
  3. 最悲剧的HTML5 API : Position地理位置
  4. 展示面-网络安全相关学习总结
  5. 储存字母 电子计算机,计算机基础_精简版
  6. oracle条件批量更新表数据
  7. [UOJ455][UER #8]雪灾与外卖——堆+模拟费用流
  8. java 子类调用父类内部类_java 如何在子类方法中实例化父类的内部类?
  9. linux搭建harbor与使用
  10. Floyd算法 求多源汇最短路
  11. 『矩阵论笔记』雅可比矩阵(Jacobian)和海森矩阵(Hessian)
  12. c语言及格率函数,求及格率的代码为什么不行。
  13. web服务器和app服务器
  14. mongoose用模型更新不了,因为模型对象中默认带有_id会提示errmsg: “Performing an update on the path ‘_id‘ would modify the i
  15. 编译优化之 - 通用循环优化
  16. getway 的session相关
  17. C语言实现模拟大乐透和双色球彩票机选【纯娱乐】
  18. java 罗马数字_JAVA,罗马数字与阿拉伯数字的互转
  19. 国科大学习资料--最优化计算方法(王晓)--期末考试试卷历年题按题型汇总
  20. 从MUD到MMO——虚拟世界发展简史以及未来可能性的杂谈

热门文章

  1. LeetCode 91 Decode Ways(编码方式)(*)
  2. 针对目前市场分析报告
  3. 金融大数据与商业价值创新
  4. Apple Watch无法与iPhone连接或配对的解决方法
  5. 数据资产分类与应用价值
  6. Bespin Global连续两年入选Gartner公有云管理服务提供商魔力象限
  7. Python编曲实践(十一):通过PyQt5和PyGame开发的简易MIDI电钢琴,支持键盘控制、基础存储、音符可视化及调性提示等功能
  8. Unity | 3D RPG小测试
  9. 宝宝第一周成长数据和指标
  10. 血的教训,都是卡巴斯基范的错