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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

安装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 项目 的全部内容， 来源链接： utcz.com/z/375858.html

回到顶部