目录
- 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的运行环境
-
从Node.js中文官网下载最新的window 64位zip包: node-v20.4.0-win-x64.zip。然后解压安装包
-
再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量
-
cmd验证是否安装成功
C:\Users\hehuan>node -v
v20.4.0C:\Users\hehuan>node test.js
hello nodeC:\Users\hehuan>npm -v
9.7.2C:\Users\hehuan>
- 安装cnpm替换npm。这样所有的包都可以从国内下载。npm install也可以用来升级
C:\Users\hehuan>
C:\Users\hehuan>npm install -g cnpm --registry=http://registry.npm.taobao.orgadded 449 packages in 21s28 packages are looking for fundingrun `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 noticeC:\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.comC:\Users\hehuan>
2. 安装vue-cli构建工具
vue-cli的全称叫command line interface,也叫脚手架,是Vue官方提供的标准化开发工具
- 查看已安装的依赖包
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.2C:\Users\hehuan>
- 安装。如果存在旧版,需要卸载旧版
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-projectVue 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 serveC:\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:12App 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.htmlPS C:\Users\hehuan\Desktop\vue-project>
7. 用yarn启动vue项目
如果vue项目有yarn.lock,则需要用yarn来启动
- 先安装yarn
C:\Users\hehuan>
C:\Users\hehuan>cnpm install -g yarn
C:\Users\hehuan>
-
因为这个yarn和Hadoop的yarn命令会冲突,所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd
-
验证
C:\Users\hehuan>yarnJs --version
1.22.19C:\Users\hehuan>
- 安装依赖
C:\Users\hehuan>yarnJs install
C:\Users\hehuan>
- 在项目根路径下启动项目
C:\Users\hehuan>yarnJs run serve
- 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 — 删除指定包