VUE笔记五 vue-cli

vue-cli

什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板。
预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速。

功能

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

安装

1. 安装nvm (Node Version Manager)

下载地址： https://github.com/coreybutler/nvm-windows/releases ， win下载nvm-setup.zip即可。

然后傻瓜式安装即可，我都安装在了D盘。

验证

在cmd中输入：nvm

nvm常用命令

  nvm install [version] #安装指定版本的node.js 。
  nvm use [version] #使用某个版本的node。
  nvm list #列出当前安装了哪些版本的node。
  nvm uninstall [version] #卸载指定版本的node。
  nvm node_mirror [url] #设置nvm的镜像。
  nvm npm_mirror [url] #设置npm的镜像。

2. 安装node.js和npm

首先设置一下nvm的下载源：

# 设置nvm的镜像
nvm node_mirrorhttps://npm.taobao.org/mirrors/node/
# 设置npm的镜像
nvm npm_mirrorhttps://npm.taobao.org/mirrors/npm/

然后以管理员模式打开cmd：

nvm install [版本号]
# 我下载的是14.19.1
nvm install 14.19.1

如果卡住，就停止，多试几次。

然后就可以看到nvm的安装目录中多了一个以版本号命名的目录，里面是

里面是node.js可执行文件以及附带的npm。

在使用npm之前，我们需要use刚刚下载的node.js版本， 注意要用管理员身份运行cmd窗口，不然可能会出现乱码。

# 列出我们下载的node
nvm list
# 使用某个版本的node
nvm use 14.19.1

然后查看一下npm的版本：

npm -v

手动安装npm

有时候使用nvm安装完node后，npm没有跟着安装，这时候可以到https://github.com/npm/cli/releases下载比较新的版本。然后下载完成后，解压开来，放到v[版本号]/node_modules下，然后修改名字为npm，并且把npm/bin中的npm和npm.cmd两个文件放到v[版本号]的根目录下。

3. 使用淘宝镜像

因为使用npm可能会比较慢，所以我们可以使用国内的cnpm：

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

4. 安装vue和vue-cli

# 我用的都是全局安装
# 安装vue
cnpm install vue  -g
# 安装vue-cli
cnpm install -g @vue/cli 

使用vue-cli创建第一个vue项目

在存放项目路径下打开cmd，执行：

vue create [项目名称]
# 选择vue3，其它的都选择no

也可以使用镜像安装：

vue create -r https://registry.npm.taobao.org [项目名称]

# 或者在文件中设置：在当前用户目录下，找到.npmrc，然后设置
registry=https://registry.npm.taobao.org

完成后，项目目录多了很多东西：

项目结构介绍

1.node_modules：本地安装的包的文件夹。

2.public：项目出口文件。

3.src：项目源文件：

    assets：资源文件，包括字体，图片等。
    components：组件文件。
    App.vue：入口组件。
    main.js：webpack在打包的时候的入口文件。

4.babel.config.js：es*转低级js语言的配置文件。

5.package.json：项目包管理文件。

注意：vscode安装vetur包用来识别.vue文件

启动项目

npm run serve

VUE笔记列表

VUE笔记一 基础语法指令
VUE笔记二 表单双绑、组件
VUE笔记三 Axios异步通信
VUE笔记四 计算属性、内容分发、自定义事件
VUE笔记五 vue-cli
VUE笔记六 webpack
VUE笔记七 vue-router
VUE笔记八 实战快速上手