WORTHY BLOG

外观

Node.js、VUE CLI 2.0安装及配置

约 1349 字大约 5 分钟

2021-08-11

Node.js

  • Node.js 简介：简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个 基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻 塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 Npm，是全球最大的开源库 生态系统。
  • 下载对应你系统的 Node.js 版本：https://nodejs.org/zh-cn/,下载完按步骤安装即可.
  • 安装完成后cmd下输入node -v及npm -v即可测试是否安装成功.

Node.js环境配置

  • 配置npm安装的全局模块所在路径,及缓存cache的路径,方便后期安装

nodeJS安装完成后，在任意目录下如D:\nodejs创建两个文件夹node_global及node_cache用来配置全局环境变量。创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set prefix  "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
  • 系统环境变量配置

在系统变量下新建NODE_PATH，输入：D:\nodejs\node_global\node_modules;

在用户变量的path下，加入全局环境变量的路径：D:\nodejs\node_global;

配置完后，安装个最常用的 express 模块测试一下，打开 cmd 窗口，输入如下命令进行模块的全局安装：

npm install express -g

VUE CLI 2.0

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目

  • 全局安装 webpack
  • WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
npm install webpack@3.12.0 -g
  • 全局安装 vue-cli2
npm install vue-cli -g

初始化项目

进入到自己要创建项目的文件夹目录，执行 vue init webpack [项目名称] 命令，注意项目不支持大写字母。

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

  • Project name (my-project) # 项目名称（我的项目）
  • Project description (A Vue.js project) # 项目描述一个Vue.js 项目
  • Author 作者（你的名字）
  • Vue build runtime：这里有两个选项：Runtime + Compiler 和 Runtime-only ， Runtime-only 要比 Runtime+ Compiler 轻大约 6KB，而且效率要高， 按上下键可以 进行选择，默认是第一个
  • Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
  • Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
  • Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）
  • Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）
  • Yes, use NPM Yes, use Yarn No, I will handle that myself：这里询问我们管 理项目是用 npm 还是 yarn ，这里我们使用 npm ,直接回车，接下来就是等待安装 node_modules。

初始化完成后进入项目并启动项目：

npm start
或
npm run dev

浏览器访问localhost:8080看见vue界面即可

项目目录介绍

  • build 文件夹：webpack 的一些相关配置；
  • config 文件夹：项目开发环境和生产环境的一些相关配置；
  • node_modules 文件夹 ：这里存放的是安装包，比如 webpack、第三方插件库、项目 的依赖文件；
  • src 文件夹：我们将要写的代码放在这里面，打包上线时会进行编译、压缩等操作；
  • static 文件夹：这里存放的是一些静态文件比如图片、css 文件、不需要进行压缩的 js 文件，打包时这个文件夹将原封不动的放到 dist（打包时自动生产的文件夹）文件夹 下面；
  • .babelrc 文件：ES6 语法编译配置，主要是将 ES 转成 ES 需要适配那些浏览器；
  • .editorconfig 文件：定义代码格式，对代码的风格进行一个统一；
  • .gitignore 文件：git 上传需要忽略的文件格式；
  • .postcssrc.js 文件：postcss 配置文件；
  • index.html 文件：要进行访问的首页面；
  • package-lock.json 文件：锁定依赖模块和子模块的版本号；
  • package.json 文件：项目基本信息,包依赖信息等；
  • README.md 文件：项目说明文件。

发生的问题

webstorm创建vue项目报错

需要重新安装node，并禁止node的安装目录路径中的文件夹有类似Work Program包含空格的文件夹。

参考链接:https://blog.csdn.net/xuanwoa/article/details/107294298

webstorm创建vue.js项目选择D:\nodejs\node_global\node_modules\vue-cli后报如下错误

"C:\Program Files\nodejs\node.exe" D:\nodejs\node_global\node_modules\vue-cli\bin\vue.js create .
internal/modules/cjs/loader.js:892
  throw err;
  ^
Error: Cannot find module 'D:\nodejs\node_global\node_modules\vue-cli\bin\vue.js'
?[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)?[39m
?[90m    at Function.Module._load (internal/modules/cjs/loader.js:745:27)?[39m
?[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)?[39m
?[90m    at internal/main/run_main_module.js:17:47?[39m {
  code: ?[32m'MODULE_NOT_FOUND'?[39m,
  requireStack: []
}
Done

在webstorm的Terminal中执行vue init webpack等待完成即可