Node.js环境搭建与Vue Cli脚手架安装使用

---

---

Node.js环境搭建-v14.15.5

nodejs是运行框架，它本身提供文件、网络端口监听、字符集等操作，简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

☛ Node.js下载安装

Node.js官网下载

下载后直接进行安装，一路next，然后install即可 [注意安装路径的选取，自行选择]

检查是否安装好

node -v
npm -v

☛ 配置Node.js

由于npm服务器在国外，所以我们现在配置npm国内镜像cnpm，以后就可以使用cnpm来安装包

npm config set registry https://registry.npm.taobao.org

执行该命令会在 .npmrc文件中配置镜像，registry就是配置的淘宝镜像

Vue CLI脚手架安装使用-@vue/cli 4.5.11

Vue CLI是vue官方提供的脚手架工具。脚手架工具能够自动将项目需要的环境、依赖等信息都配置好。

☛ 安装vue cli

Vue CLI官网
注意：Vue CLI 4.x 需要 **Node.js v8.9 或更高版本 (推荐 v10 以上)**

命令行安装：

npm install -g @vue/cli

……

安装完成后查看vue版本信息，出现如下信息：
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ vue -v
+ ~~~ + CategoryInfo : ObjectNotFound: (vue:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

我们上面是全局安装vue/cli，安装完后报错：无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。环境变量的错误。采取如下方法解决：

首先npm获取全局安装的默认目录

npm config get prefix

其次，我们在环境变量-系统变量-Path中进行相应配置

修改完成后发现cmd下已经可以正常查看vue版本信息了！但是，在powershell下无论是以管理员身份还是非管理员身份仍旧报错┭┮﹏┭┮


可能原因： 首次在计算机上启动 Windows PowerShell 时，现用执行策略很可能是 Restricted（默认设置）。Restricted 策略不允许任何脚本运行。

解决：

以管理员身份运行powershell，输入命令set-ExecutionPolicy RemoteSigned，选择 Y是 或 A全是 就好啦~

查看vue版本信息有两种命令：

vue -V
vue --version

注意：第一种方式V一定要大写嗷！

☛ Vue CLI 创建项目

• 方式一：命令行方式
  1）指定路径下创建项目 vue create 项目名称
  
  2）选择要安装哪些包（默认是Babel和ESLint），也可以manually手动选择 [空格键确认]
  ▫▫▫ 自定义配置中按空格标识为选中
  
  
  
  
  
  
  3）cd进入项目路径下，npm run serve运行项目就好啦~
  
  

----------------------命令行方式创建项目主要命令如下红框所示----------------------

• 方式二：图形界面方式
  1）vue ui启用图形化界面
  注意：一定要在自己欲创建项目目录的路径下执行此命令！
  
  
  2）创建新项目，类同命令行方式，自行选取即可
  
  3）创建成功！！！
  
  

☛ Vue CLI 搭建项目的目录结构

Vue CLI创建项目完毕后，如下为两种创建方式生成的目录结构：

名称	解析
node_modules	项目依赖(内置webpack)，当前目录下npm/cnpm安装的非全局依赖库放在这儿
public	Vue3.x 静态资源目录，存放不会变动的文件[该目录下文件并不会被webpack处理，而是直接复制到最终的打包目录，默认dist/下] 必须使用绝对路径引用这些文件 可包括css、js、webfonts等
public–favicon.ico	网页导航栏层logo图标
public–index.html	主入口文件
src	源码目录，源码文件夹存放公用api或常用api
src–assets	Vue3.x 静态资源目录，存放需改动文件，相对路径引入 [与public区别：理解为public放别人家资源，assets放自己的资源文件]
src–components	组件目录，Vue组件(驼峰命名)，一个组件对应一个实例，存放一些公共组件
src–router	路由，实现页面跳转
src–plugins	项目所用插件
src–store	vuex状态管理
src–utils	项目所用的公共方法
src–views	存放所有的路由组件
src–App.vue	根组件，默认入口组件，它的vm实例控制的就是index.html中的div区域
src–main.js	入口js，程序项目入口文件，webpack编译打包从此开始，所有用到的资源在此import引入，才能被打包进项目；最终打包的js文件会自动插入至index.html页面中 加载各种公用组件
.gitignore	可忽略的文件 ，此处不作介绍
babel.config.js	Babel配置文件，Babel是处理es6高级语法转换库，可将高级语法转换为第几浏览器可识别的js代码，解决兼容性问题，是项目必备依赖
package-lock.json	记录当前项目依赖的所有库的具体来源和版本号，锁定版本
package.json	项目信息说明文件以及依赖包列表，当拷贝项目源码时，是必须要忽略node_modules目录的，其他人要重新安装项目的依赖，执行npm install，会根据package.json中指定的依赖列表自动安装到当前项目目录的node_modules中
README.md	项目说明文件-当前项目启动安装提示
……

拓：Vue项目中的文件/文件夹命名规范

遵循以下原则：

• index.js 或者 index.vue，统一使用小写字母开头的(kebab-case)命名规范
• 属于组件或类的，统一使用大写字母开头的(PascalCase)命名规范
• 其他非组件或类的，统一使用小写字母开头的(kebab-case)命名规范
  

详情见 vue官方风格指南

文件夹命名规范：

属于components文件夹下的子文件夹，使用大写字母开头的PascalBase风格

• 全局通用的组件放在 /src/components下
• 其他业务页面中的组件，放在各自页面下的 ./components文件夹下
• 每个components文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或index.js，其他.vue文件统一大写开头（Pascal case），components下的子文件夹名称统一大写开头（PascalCase）

其他文件夹统一使用kebab-case的风格

文件命名规范：

*.js文件命名规范

属于类的.js文件，除index.js外，使用PascalBase风格
其他类型的.js文件，使用kebab-case风格
属于Api的，统一加上Api后缀

*.vue文件命名规范

除index.vue之外，其他.vue文件统一用PascalBase风格
- Pascal风格 帕斯卡命名法的命名规则：
	单字之间不以空格断开或连接号(-)、底线(_)连接
	第一个单词首字母采用大写字母，后续首字亦用（大驼峰式命名法）