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命令行命令简单使用
• • 8.1 npm
  • 8.2 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_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量

3. cmd验证是否安装成功

C:\Users\hehuan>node -v
v20.4.0

C:\Users\hehuan>node test.js
hello node

C:\Users\hehuan>npm -v
9.7.2

C:\Users\hehuan>

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

C:\Users\hehuan>
C:\Users\hehuan>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:\Users\hehuan>
C:\Users\hehuan>cnpm -v
cnpm@9.2.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node_modules\cnpm\lib\parse_argv.js)
npm@9.8.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node_modules\cnpm\node_modules\npm\index.js)
node@20.4.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node.exe)
npminstall@7.9.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\install_software\Node.js\node-v20.4.0-win-x64
win32 x64 10.0.19045
registry=https://registry.npmmirror.com

C:\Users\hehuan>

2. 安装vue-cli构建工具

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

1. 查看已安装的依赖包

C:\Users\hehuan>cnpm ls -g
E:\install_software\Node.js\node-v20.4.0-win-x64
+-- cnpm@9.2.0
+-- corepack@0.19.0
`-- npm@9.7.2


C:\Users\hehuan>

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

C:\Users\hehuan>cnpm install -g @vue/cli

3. 使用vue-cli创建项目

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

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

C:\Users\hehuan\Desktop>
C:\Users\hehuan\Desktop>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:\Users\hehuan48495\Desktop\vue-project.
......省略部分......
🎉  Successfully created project vue-project.
👉  Get started with the following commands:

 $ cd vue-project
 $ npm run serve


C:\Users\hehuan\Desktop>

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

C:\Users\hehuan\Desktop>cd vue-project
C:\Users\hehuan\Desktop\vue-project>
C:\Users\hehuan\Desktop\vue-project>cnpm install
C:\Users\hehuan\Desktop\vue-project>

4. 启动项目

C:\Users\hehuan\Desktop\vue-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:\Users\hehuan\Desktop\vue-project>
PS C:\Users\hehuan\Desktop\vue-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:\Users\hehuan\Desktop\vue-project>

7. 用yarn启动vue项目

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

1. 先安装yarn

C:\Users\hehuan>
C:\Users\hehuan>cnpm install -g yarn
C:\Users\hehuan>

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

3. 验证

C:\Users\hehuan>yarnJs --version
1.22.19

C:\Users\hehuan>

4. 安装依赖

C:\Users\hehuan>yarnJs install
C:\Users\hehuan>

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

C:\Users\hehuan>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_software\Node.js\node-v20.4.0-win-x64\yarn_bin”
• yarnJs config set global-folder “E:Node.js\node-v20.4.0-win-x64\yarn_node_modules” — 设置全局包安装路径
• yarnJs config set cache-folder “E:\install_software\Node.js\node-v20.4.0-win-x64\yarn_cache” — 设置全局缓存路径
• yarnJs [global] add cowsay — [全局]安装指定的包
• yarnJs remove cowsay — 删除指定包