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

07-16 427阅读

文章目录

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 开发框架