Vue3 安装与配置 详细教程

   Vue3 安装与配置 详细教程

•    NodeJS 安装与配置
•    Vue 安装与配置
•    安装 Vue-cli 3.x 脚手架
•    Vue3 项目创建

1. NodeJS 安装与配置

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

        

      1.2 可以搜索其中文官网

        

    打开之后，显示如下

   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是否安装成功(按住快捷键 win + R 输入 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 --registry https://registry.npm.taobao.org install express
    永久指定淘宝镜像源：
    npm config set registry https://registry.npm.taobao.org
    安装 cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    备注：以上淘宝镜像过期，可以尝试安装淘宝新的镜像，如下：

   npm config set registry https://registry.npmmirror.com

或者

  npm config set registry https://registry.npmjs.org

  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的路径

  2. Vue 安装与配置

  2.1. 安装vue.js命令：

  2.1.1 npm install vue -g   （或：cnpm 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

 3.2 使用npm命令查看全局安装的情况

     执行：npm list -global

  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

5. Vue3 + Vite 创建项目

 创建命令：npm create vite@latest

访问：http://localhost:5173  ,出现如下界面：

到此，已全部完成！