IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)

目录

• 1. 安装 Node.js
• 2. 安装 vue-cli 构建工具
• 3. 使用 vue-cli 创建项目
• 4. 启动项目
• 5. IDEA 启动 vue
• 6. 在 IDEA 编译 vue 项目
• 7. 用 yarn 启动 vue 项目
• 8. npm 和 yarn 命令行命令简单使用

1. 安装 Node.js

Node.js 基于 Google 的 V8 引擎，形成了一个 Javascript 的运行环境

1. 从 Node.js 中文官网下载最新的 window 64 位 zip 包: node-v20.4.0-win-x64.zip。然后解压安装包

2. 再将 E:install_softwareNode.jsnode-v20.4.0-win-x64 目录配置到环境变量

3. cmd 验证是否安装成功

C:Usershehuan>node -v
v20.4.0

C:Usershehuan>node test.js
hello node

C:Usershehuan>npm -v
9.7.2

C:Usershehuan>

4. 安装 cnpm 替换 npm。这样所有的包都可以从国内下载。npm install 也可以用来升级

C:Usershehuan>
C:Usershehuan>npm install -g cnpm --registry=http://registry.npm.taobao.org

added 449 packages in 21s

28 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New minor version of npm available! 9.7.2 -> 9.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.0
npm notice Run npm install -g npm@9.8.0 to update!
npm notice

C:Usershehuan>
C:Usershehuan>cnpm -v
cnpm@9.2.0 (E:install_softwareNode.jsnode-v20.4.0-win-x64node_modulescnpmlibparse_argv.js)
npm@9.8.0 (E:install_softwareNode.jsnode-v20.4.0-win-x64node_modulescnpmnode_modulesnpmindex.js)
node@20.4.0 (E:install_softwareNode.jsnode-v20.4.0-win-x64node.exe)
npminstall@7.9.0 (E:install_softwareNode.jsnode-v20.4.0-win-x64node_modulescnpmnode_modulesnpminstalllibindex.js)
prefix=E:install_softwareNode.jsnode-v20.4.0-win-x64
win32 x64 10.0.19045
registry=https://registry.npmmirror.com

C:Usershehuan>

2. 安装 vue-cli 构建工具

vue-cli 的全称叫 command line interface，也叫脚手架，是 Vue 官方提供的标准化开发工具

1. 查看已安装的依赖包

C:Usershehuan>cnpm ls -g
E:install_softwareNode.jsnode-v20.4.0-win-x64
+-- cnpm@9.2.0
+-- corepack@0.19.0
`-- npm@9.7.2


C:Usershehuan>

2. 安装。如果存在旧版，需要卸载旧版

C:Usershehuan>cnpm install -g @vue/cli

3. 使用 vue-cli 创建项目

使用 vue create 命令创建项目。项目包含项目运行的基本脚手架文件，和 HelloWorld 项目文件

其中 babel 是一个 javascript 编译器，可以将 ES6 转换成 ES5；eslint 是进行语法检查的

C:UsershehuanDesktop>
C:UsershehuanDesktop>vue create vue-project


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in C:Usershehuan48495Desktopvue-project.
...... 省略部分......
🎉  Successfully created project vue-project.
👉  Get started with the following commands:

 $ cd vue-project
 $ npm run serve


C:UsershehuanDesktop>

进入项目目录，安装项目所需依赖

C:UsershehuanDesktop>cd vue-project
C:UsershehuanDesktopvue-project>
C:UsershehuanDesktopvue-project>cnpm install
C:UsershehuanDesktopvue-project>

4. 启动项目

C:UsershehuanDesktopvue-project>cnpm run serve
...... 省略部分......
 DONE  Compiled successfully in 8216ms                                                                          21:39:12


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.101.103:8080/

访问地址: http://192.168.101.103:8080/。效果如下：

5. IDEA 启动 vue

使用 IDEA 打开项目, 然后在 File–Settings–Plugins–Makerplace 搜索 vue.js, 安装并重启 IDEA

配置如下：

再启动项目

6. 在 IDEA 编译 vue 项目

在控制台进行 vue 的编译。编译后的包位于根路径下的 dist 目录

PS C:UsershehuanDesktopvue-project>
PS C:UsershehuanDesktopvue-project> npm run build           
...... 省略部分......
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

PS C:UsershehuanDesktopvue-project>

7. 用 yarn 启动 vue 项目

如果 vue 项目有 yarn.lock，则需要用 yarn 来启动

1. 先安装 yarn

C:Usershehuan>
C:Usershehuan>cnpm install -g yarn
C:Usershehuan>

2. 因为这个 yarn 和 Hadoop 的 yarn 命令会冲突，所以修改 E:install_softwareNode.jsnode-v20.4.0-win-x64 路径下的 yarn.cmd 名称为 yarnJs.cmd

3. 验证

C:Usershehuan>yarnJs --version
1.22.19

C:Usershehuan>

4. 安装依赖

C:Usershehuan>yarnJs install
C:Usershehuan>

5. 在项目根路径下启动项目

C:Usershehuan>yarnJs run serve

6. IDEA 启动 Vue 项目，先进行配置
   

再启动项目

8. npm 和 yarn 命令行命令简单使用

8.1 npm

• npm config list -l 查看配置信息
• npm list [-g] [yarn] 查看当前项目的包，[或查看全局的包]，[或查看指定的包]
• npm info yarn 查看指定包的详细信息

8.2 yarn

• yarnJs config list — 查看配置信息
• yarnJs config set key value — 设置指定配置
• yarnJs config get key — 查看指定配置
• yarn info npm — 查看包详细信息
• yarnJs global bin — 查看全局 bin 路径
• yarnJs global dir — 查看全局包安装路径
• yarnJs cache dir — 查看全局缓存路径
• yarnJs config set prefix“E:install_softwareNode.jsnode-v20.4.0-win-x64yarn_bin”
• yarnJs config set global-folder“E:Node.jsnode-v20.4.0-win-x64yarn_node_modules”— 设置全局包安装路径
• yarnJs config set cache-folder“E:install_softwareNode.jsnode-v20.4.0-win-x64yarn_cache”— 设置全局缓存路径
• yarnJs [global] add cowsay — [全局]安装指定的包
• yarnJs remove cowsay — 删除指定包