使用npm安装Vue3教程

 1. NodeJS 安装与配置

   1.1 百度上搜索 node 找到其官网（英文官网），可以搜索其中文官网

    打开之后，显示如下

   1.3 通过中文网下载NodeJS安装文件 （Node.js 中文网）

   1.3.1 目前下载的是：Nodejs18.16.1 版本（不建议使用最新版本）

   1.3.2 下载之后的文件格式

    1.4 Nodejs的安装

    1.4.1 双击nodejs的安装文件，出现如下界面，点击下一步即可

   

    1.4.2 选择安装的目录

  至此，nodejs安装完成

  1.5 验证Nodejs是否安装成功

  打开cmd， 输入如下命令：

  node -v   ：查看nodejs的版本

  npm -v    ：查看npm的版本

   1.6 配置npm默认安装目录和缓存日志目录

   1.6.1  首先查看npm默认安装目录与缓存日志目录的位置

         npm config get prefix ：查看npm全局安装保存路径

         npm config get cache：查看npm安装缓存cache路径

    1.6. 2. 修改默认路径

    npm config set prefix ‘路径’

    npm config set cache ‘路径’

    例如：修改为：

    D:\softtools\vue\nodejs\node_global

    D:\softtools\vue\nodejs\node_cache

   则：

    1.7 修改配置镜像

    1.7.1 查看目前的镜像设置

   npm config get registry

    1.7.2. 更换镜像（淘宝镜像）

  永久指定淘宝镜像源：
    npm config set registry https://registry.npmmirror.com

  1.7.3 检查镜像是否安装成功：

     执行：npm config get registry

     

  1.7.4 查看获取安装包信息：Npm info 包名 看看能否获得包名的信息

   例如：我们来看一下npm获取的vue包的相关信息：

    执行：npm info vue

  1.8  npm环境变量的配置：NPM_HOME

  1.9 PATH中添加 vue.cmd的路径

用Everything这个软件（或者搜索）搜索vue.cmd的位置，

我的地址是（我是在在node里面直接安装的vue -cli）

搜索到这个批处理文件后把这个文件的路径加入Path中就行了

  2. Vue 安装与配置

  2.1. 安装vue.js命令：

  2.1.1 npm install vue -g   

  2.1.2 这里的-g是指安装到global全局目录去(安装到global下，即node_global目录中）

   2.2 验证vue的安装

   2.2.1 npm list vue

   2.2.2 npm list vue -g

   2.3 安装webpack模块

   安装webpack模板，Webpack是一个模块打包器(bundler)。

   在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
它将根据模块的依赖关系进行静态分析，生成对应的静态资源

   2.3.1 npm install webpack -g

   2.3.2 查看webpack的版本

  2.4 安装webpack-cli

  webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
  所以还需要安装webpack-cli

  2.4.1 npm install  webpack-cli -g

  3. 安装Vue-cli 3.x 脚手架

    Vue CLI 是一个基于 Vue.js 进行前端快速开发的脚手架(框架)。

   3.1 安装vue-cli 3.x

   执行： npm install @vue/cli -g

  4. Vue3 项目创建

  4.1 vue3.0创建项目

      vue create 项目名 

例如在：D:\softtools\workspace\workspace_vue 目录下创建一个项目vueproject，先切换到workspace_vue目录，再执行创建命令，如下

  4.2 Vue创建过程中的选项配置（可根据自己的需求进行参数的配置） 

   4.3 开始创建项目（第一次创建比较慢）

   4.4 vue项目创建完成

   4.5 启动vue项目

   4.5.1 在当前cmd命令窗口，执行 cd vueprojecct进行目录的切换，然后 执行 npm run serve 启动项目

   4.6 访问：http://localhost:8080

到此，已全部完成！