Vue学习笔记 —— node.js与vue脚手架安装

nodejs简介：

1. Node.js 是一个开源与跨平台的 JavaScript 运行时环境。
2. JavaScript程序可以运行在浏览器中
3. JavaScript程序可以运行在Node.js环境中
4. Node.js在浏览器外运行的。

安装Vue脚手架需要先安装Node.js (安装好了的不要随意卸载Nodejs)

安装Node.js:

win+r输入cmd 或者在我的电脑打开cmd

下载Node.js：（找到与自己电脑对应的）
中文文档地址：

双击打开下载好的node.js，点击next，勾选两个复选框即可。

查看是否安装成功：
node -v 出现node.js的版本号就是已经安装成功。

注意：安装Nodejs时会一起安装npm,npm的作用是对Nodejs依赖的包进行管理,也可以理解成用来安装或卸载nodejs需要的东西

如果不是安装在C盘就走1.~4

• 1.1 配置一下npm在全局安装模块时的路径和缓存的路径

• 1.2 在安装node.js目录下，新建两个文件夹

   node_global(全局)
   node_cache(缓存)
  

• 1.3 打开cmd命令窗口

   npm config set prefix "F:\nodejs\node_global"
   npm config set cache "F:\nodejs\node_cache"
  

• 1.4 打开我的电脑 => 右击此电脑 => 属性 => 高级设置 => 环境变量 => path => 编辑 => 新建 => node_global的文件位置放上去

注意：由于npm是国外的服务器，所以下载比较慢，我们需要安装淘宝镜像

安装淘宝镜像:

1. 复制网址：

[](https://developer.aliyun.com/mirror/NPM?from=tnpm)

3. 复制淘宝镜像的指令

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

4. 打开cmd：将复制下来的指令粘贴即可

webpack:构建工具和打包的

安装webpack:

npm i(install) webpack-cli -g(global)
cnpm i(install) webpack-cli -g(global)

当webpack出现错误的时候（使用以下指令，重装webpack）
卸载webpack:

   //安装install/卸载uninstall
   cnpm uninstall webpack-cli -g(global)

Vue脚手架:

vue-cli就是vue的脚手架工具,和我们在工地上看到的脚手架是一样的，它帮助我们搭建基本的开发环境，就好比如架子搭好了，利用它搞定目录的结构、本地调试、单元测试、热加载及代码部署。

热加载（不需要重启项目）

一、2.X版本的脚手架安装：

1. cnpm i vue-cli -----安装vue2.x版本的指令
2. vue -V（大写）----查看vue的版本（出现版本号，就是安装成功）

2x版本创建项目

1. vue init webpack （项目名）—>回车

   注意：项目名字母不能大写，不能使用中文。
   原因：这个指令的意思是初始化一个vue项目，webpack是构建工具，也就是整个项目是基于webpack的。其中项目名称是整个项目文件加的名称，这个文件夹会自动生成在你指定的目录中。

2. project name —> 项目名称 —》回车

3. author 作者 —>回车填写作者名

4. vue-router 是否选择安装路由，这是官方的路由

5. eslint —>no 严格规范（规范写代码的格式）

6. test 是否安装单元测试

7. e2e 是否安装e2e测试

二、安装3.X版本

需要安装桥接工具，向下兼容：

//如果使用npm安装较慢就使用cnpm安装
npm i -g @vue/cli-init
cnpm i -g @vue/cli-init

安装3.X版本的脚手架指令

cnpm i -g @vue/cli

创建项目

• vue create 项目名称
• 使用什么方式运行项目：npm(第一个选项)---->弹出一个窗口
• default是一默认使用配置，默认安装及自动配置babel,eslint
• Manually select features是自定义配置，需要我们手动配置，可以自己选择配置什么东西
• 使用↑↓k控制上下—》回车选择（确定）
• 初始化项目
• cd 项目名
• 运行项目:npm run serve

3.X版本相当于2.X版本更简洁。