Vue初学之使用npm搭建Vue环境

简介: Vue初学之使用npm搭建Vue环境

这里系统是windows,先安装node(新版的Node.js已自带npm),然后使用npm安装vue,这里没有使用nvm。


Node.js是一个基于Chrome V8 引擎的JavaScript runtime(运行环境),Node.js使用了一个事件驱动的模型,使其轻量又高效。


npm (全称Node PackageManager,即node包管理器)是Node.js默认的、以JavaScript编写的软件包管理系统npm来分享和使用代码已经成了前端的标配


npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具,也是世界上最大的软件注册表,里面包含超过600000 个 包的结构,能够使您轻松跟踪依赖项和版本。


安装完毕node后,会默认安装好npm,npm本身也是基于Node.js开发的软件。

【1】node安装

官网地址:https://nodejs.org/en/download/


下载后傻瓜式安装即可,具体教程可以参考:node.js安装配置

默认会配置node和npm的环境变量:


安装后会自动提示如下,这里可以直接关闭窗口。


我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检测安装的node版本:

检测安装的npm版本:


OK,接下来就可以安装VUE官方提供的命令行工具 (CLI)–脚手架。

查看并设置镜像:

#查看镜像
npm config get registry
# 设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
#npm info 命令可以查看每个模块的具体信息。比如,查看 underscore 模块的信息。
npm info underscore

镜像迁移:

# 新的
npm config set registry https://registry.npmmirror.com
# 验证查看
npm config get registry

安装webpack

npm install --global webpack
npm install --global webpack-cli


【2】安装Vue

① 安装cnpm


由于 npm 安装速度慢,这里使用了的镜像及其命令 cnpm。

# 可指定版本cnpm@6.1.1  ,否则将安装最新的
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 当然也可以直接设置镜像 如下所示
npm config set registry https://registry.npm.taobao.org
#npm info 命令可以查看每个模块的具体信息。比如,查看 underscore 模块的信息。
npm info underscore

② 使用cnpm安装vue

cnpm install vue
# or
npm install vue

③ 使用cnpm安装vue-cli


Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI的文档。

cnpm install --global vue-cli
# or
npm install --global vue-cli

④ 检测vue版本

vue --version

更多操作选项参考下图:

【3】创建并运行vue项目


① 创建工作空间,初始化第一个demo

如这里创建了D:\vueworkspace作为vue项目文件夹。

② 初始化项目

vue init webpack vueDemo

会有一些交互操作如下(回车,输入Y或者n进行交互):

? Project name vuedmeo
? Project description a vue project
? Author jane
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

最后一步需要注意,如果默认选择,则它会自动帮你下载。否则你就得需要进入到项目目录,手动下载。

cd vueDemo
npm install

安装完成如下(这个过程可能比较慢):

这时你可以选择在项目文件路径下,使用 npm run dev命令启动项目。


也可以选择使用IDE比如webstorm打开项目,如下图所示:

使用终端命令启动:


浏览器访问:http://localhost:8080

也可以在package.json上右键-Show npm Scripts:

如下所示,双击dev或者start都可以


③ vue项目目录结构

  • build – 大部分是webpack的配置文件
  • config – 配置文件,比如配置监听端口
  • node_modules – 依赖包都在这里
  • src – 主工程文件夹,基本上所有的开发都在这个文件夹进行
  • static – 静态文件目录
  • package.json – 项目的一些配置信息
build // 项目构建(webpack)相关代码
  build.js // 生产环境构建代码
  check-versions.js // 检查node&npm等版本
  dev-client.js // 热加载相关
  dev-server.js // 构建本地服务器
  utils.js // 构建配置公用工具
  vue-loader.conf.js // vue加载器
  webpack.base.conf.js // webpack基础环境配置
  webpack.dev.conf.js // webpack开发环境配置
  webpack.prod.conf.js // webpack生产环境配置
  
config// 项目开发环境配置相关代码
  dev.env.js // 开发环境变量
  index.js //项目一些配置变量
  prod.env.js // 生产环境变量
  
node_modules// 项目依赖的模块
src// 源码目录
  assets// 资源目录  logo.png
  components// vue公共组件   Hello.vue
  router// 前端路由  index.js// 路由配置文件
  App.vue// 页面入口文件(根组件)
  main.js// 程序入口文件(入口js文件)
  
static// 静态文件,比如一些图片,json数据等
  .gitkeep
剩余
  .babelrc// ES6语法编译配置
  .editorconfig// 定义代码格式
  .gitignore// git上传需要忽略的文件格式
  index.html// 入口页面
  package.json// 项目基本信息
  README.md// 项目说明

【4】npm与cnpm

① npm

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用


npm命令

npm -v 来测试是否成功安装

查看当前目录已安装插件:npm list

更新全部插件: npm update [ --save-dev ]

使用 npm 更新对应插件: npm update <name> [ -g ] [ --save-dev]

使用 npm 卸载插件: npm uninstall <name> [ -g ] [ --save-dev ]

② cnpm

淘宝团队做的国内镜像,因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。


命令提示符执行

# 旧的
npm install cnpm -g --registry=https://registry.npm.taobao.org
#新的
npm install -g cnpm --registry=https://registry.npmmirror.com

可以使用cnpm -v 来测试是否成功安装。

通过改变地址来使用淘宝镜像,npm的默认地址是https://registry.npmjs.org/

可以使用npm config get registry查看npm的仓库地址

可以使用npm config set registry https://registry.npm.taobao.org来改变默认下载地址,达到可以不安装cnpm就能采用淘宝镜像的目的,然后使用上面的get命令查看是否成功。

注意: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm,不管你 npm 是不是低版本,默认都会安装最新版的 cnpm。所以可以如下所示安装指定版本的cnpm:

npm install -g cnpm@6.1.1 --registry=https://registry.npm.taobao.org

如果安装后提示没有该命令,那么如果你设置了 prefix,记得添加到系统环境变量中。如下图所示,本机路径为D:\softinstall\nodejs\node_global ,将其添加到系统环境变量(Path)中再次进入命令窗口即可。

【5】安装yarn


推荐使用windows安装程序或者直接使用npm install yarn进行。


目录
相关文章
|
24天前
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
21天前
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
|
3月前
|
JavaScript 安全 测试技术
vue封装组件发布到Npm
【10月更文挑战第17天】
|
4月前
|
JavaScript
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量,创建一个空文件夹并使用VSCode打开,通过VSCode的终端执行`npm init vue@latest`命令以初始化项目,选择默认配置即可。接着安装项目依赖并启动开发服务器,最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
|
4月前
|
缓存 JavaScript 前端开发
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
该文章提供了八种解决Vue项目创建时遇到的`command failed: npm install --loglevel error`错误的方法,包括清理缓存、更换npm源、重新安装Node.js等措施。
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
|
5月前
|
缓存
成功解决:Could not resolve dependency: npm ERR! peer vue@“^3.0.2“ from vuex@4.0.2
这篇文章讨论了在使用npm安装依赖时遇到的一个常见问题,即无法解析依赖导致的"peer dependency"冲突错误。文章提供了几种解决方法,包括清除npm缓存、删除`node_modules`文件夹和`package-lock.json`文件,然后重新尝试安装,以解决版本冲突问题。
|
5月前
|
JavaScript
VUE——配置本地运行指定不同环境
VUE——配置本地运行指定不同环境
103 0
|
5月前
|
JavaScript 测试技术
VUE——打包时如何指定环境
VUE——打包时如何指定环境
52 0
|
7月前
使用npm构建vite+vue+ts项目的两种方式
使用npm构建vite+vue+ts项目的两种方式
182 0
使用npm构建vite+vue+ts项目的两种方式
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的环境保护生活App附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的环境保护生活App附带文章源码部署视频讲解等
76 0

热门文章

最新文章

推荐镜像

更多