nodejs安装部署运行vue前端项目

文章目录

• 1.安装nodejs
• 2.安装Vue CLI
• • 1.配置npm镜像源：
  • 2.安装Vue CLI：
  • 3.创建Vue项目
  • 4.启动Vue项目
  • 5.Express

    1.安装nodejs

    Node.js® 是一个免费、开源、跨平台的 JavaScript 运行时环境，它让开发人员能够创建服务器、Web 应用、命令行工具和脚本。

    • 访问Node.js官网。
    • 输入node -v和npm -v命令，查看Node.js和npm的版本号，以确认安装成功。

      npm（Node Package Manager）是Node.js的官方包管理工具，它具有多重作用，为JavaScript开发者提供了高效、灵活和可靠的包管理解决方案。

      2.安装Vue CLI

      vuecli脚手架是干什么的？

      ‌Vue CLI是一个官方提供的命令行工具，用于快速创建和管理Vue.js项目。

      它的主要功能和特点包括：‌

      • 快速项目生成：Vue CLI可以快速生成一个基本的Vue项目结构，包括必要的文件和配置，使得开发者可以立即开始编码，无需手动设置基础结构。‌12
      • 基于‌Webpack：Vue CLI基于Webpack构建，这意味着它利用Webpack的强大功能进行资源管理和代码优化，如依赖管理、代码分割和性能优化等。‌13
      • 开箱即用和易于扩展：Vue CLI提供了合理的默认配置，使得新项目可以立即运行，同时它也支持通过插件和配置文件进行扩展，以满足特定需求。‌12
      • 命令行和图形界面：除了命令行界面外，Vue CLI还提供了一个图形化用户界面，使得项目管理更加直观和方便。
      • 支持‌Vue 2和‌Vue 3：Vue CLI支持创建基于Vue 2和Vue 3的项目，适应不同的开发需求。‌

        总之，Vue CLI是一个强大的工具，帮助开发者更高效地构建和维护Vue.js应用。

        1.配置npm镜像源：

        #临时配置
        npm config set registry https://registry.npmmirror.com
        # 永久配置
        npm config set registry https://registry.npmmirror.com
        

        2.安装Vue CLI：

        npm install -g @vue/cli
        vue -V
        

        3.创建Vue项目

        创建项目：

        在命令行中，使用cd命令切换到你想创建Vue项目的目录。

        输入vue create 项目名命令（将“项目名”替换为你想要的项目名称），并按提示操作。Vue CLI会引导你完成项目的创建过程，包括选择预设、配置Vue Router、Vuex等。

        进入项目目录：

        项目创建完成后，使用cd 项目名命令进入项目目录。

        vue create myvue
        # 项目名不能大写
        

        

        cd myvue
        npm run serve
        npm run build
        # 项目生成dist文件夹下
        

        4.启动Vue项目

        npm install
        npm run dev
        

        5.Express

        基于 Node.js 平台，快速、开放、极简的 Web 开发框架