初学者vue环境搭建篇

最新推荐文章于 2024-03-27 21:01:03 发布

良月零五

最新推荐文章于 2024-03-27 21:01:03 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue npm nodejs

本文链接：https://blog.youkuaiyun.com/sunshouyan/article/details/107013988

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Windows和Linux环境下安装Node.js，通过淘宝镜像管理NPM依赖，全局安装Vue CLI脚手架，创建并初始化Vue项目，以及常见NPM命令的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装node

node是目前vue开发的基础环境，
windows环境下载：https://nodejs.org/en/download/ 一步步执行安装即可；
linux环境安装：

wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz   // 下载
tar xf node-v10.9.0-linux-x64.tar.xz                  // 解压
cd node-v10.9.0-linux-x64/                            // 进入解压目录
./bin/node -v                                         // 执行node命令 查看版本

2.校验node安装是否成功

在node安装的根目录下，输入打开cmd，打开命令窗口，查看node的版本号, 出现版本号说明安装成功

D:\node>node -V
v12.14.1

3.安装淘宝npm镜像管理依赖

D:\node>npm install -g cnpm  --registry=https://registry.npm.taobao.org

4.安装全局vue-cli脚手架

D:\node>cnpm install -global vue-cli

5.查看vue-cli是否安装成功

D:\node>vue -V
2.9.6

创建第一个vue项目

D:\node>vue init webpack myDemo
? Project name mydemo                        // 输入项目名称 
? Project description my first test project  // 输入项目描述
? Author sunsy                               // 输入作者名称
? Vue build standalone                      // 打包方式 执行回车即可
? Install vue-router? Yes                   // 是否安装路由依赖 
? Use ESLint to lint your code? No          // 是否使用eslint代码规范编码 
? Set up unit tests No                      // 是否单元测试 
? Setup e2e tests with Nightwatch? No       // 是否E2E测试
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM                              // 选中点击 执行回车即可
  Yes, use Yarn
  No, I will handle that myself
  ------
  -----安装过程
  -----
# Project initialization finished!        // 出现以下这段代码说明项目创建成功
# ========================
To get started:
  cd myDemo
  npm run dev

进入项目

D:\node>cd myDemo
D:\node\myDemo>cnpm install   // 安装项目依赖
D:\node\myDemo>cnpm run dev   // 启动项目，开发功能
D:\node\myDemo>cnpm run build // 项目打包

补充内容：npm常用命令

npm安装依赖
npm install express // 本地安装
npm install express -g // 全局安装
npm查看安装依赖信息
npm list -g // 查看全局安装依赖列表
npm list express // 查看某个依赖安装版本
npm更新依赖
npm update express
npm搜索依赖
npm search express
遇到报错：npm resource busy or locked…
执行：npm cache clean npm install
npm清除缓存
npm cache clean --force
npm卸载依赖
npm uninstall express
npm ls
以上express为示例依赖，实际使用替换成操作的依赖名称即可。