Vue-cli脚手架

文章目录

前言
搭建Vue-Cli脚手架
- 安装npm
- - 可能出现的报错及解决办法
  - 国内淘宝镜像服务器
- 全局安装 vue-cli
- 创建 Vue-Cli工程
- 创建 Vue 的基本模板
总结
- 终端打开/关闭操作
- 创建Vue-Cli工程过程

前言

提示：这里可以添加本文要记录的大概内容：

Vue CLI是一个基于 Node.js 的脚手架工具，可以快速构建 Vue.js 项目的命令行工具。它集成了很多常用的工具和插件，比如 Babel、Webpack、ESLint 等，可以帮助我们创建和开发 Vue.js 项目。

脚手架（scaffold）是一个用于快速搭建项目结构的工具，它可以根据项目需求生成文件和目录结构等基础代码。Vue CLI 就是一个基于脚手架的工具，它可以帮助我们快速搭建一个 Vue.js 项目的基础结构，包括目录结构、配置文件等。

因此，Vue CLI 和脚手架之间的关系就是，Vue CLI 是一种基于脚手架的工具，可以帮助我们快速构建和开发 Vue.js 项目。

搭建Vue-Cli脚手架

安装npm

先下载Node.js ，然后傻瓜式安装
提示：以下是本篇文章正文内容，下面案例可供参考

Ctrl+反引号建打开终端（ESC下面键）
输入：npm
在这里插入图片描述

可能出现的报错及解决办法

①、如果是权限问题用管理员打开：
在这里插入图片描述
再打开终端输入npm

②、如果是以下报错：
在这里插入图片描述
在电脑下面的搜索框中搜索pwe，打开Windows PowerShell

输入：

set-ExecutionPolicy RemoteSigned

选择是输入 y
在这里插入图片描述
最后再次以管理员身份运行VS Code

回到VS Code再次运行npm

国内淘宝镜像服务器

加速 NPM 包的下载和安装，提高开发效率

避免由于原始 NPM 源的不稳定性导致的下载和安装失败

避免由于境内外网络访问的限制、封锁等问题导致的访问速度缓慢或无法下载 NPM 包的问题

首先复制下面代码：

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

复制然后到VS Code终端右键（右键就是粘贴）

怎么知道成没成功？
输入：

npm config get registry

当显示https://registry.npm.taobao.org链接的时候即为成功
在这里插入图片描述

全局安装 vue-cli

目的：在任何目录下都可以使用脚手架工具

安装最新@vue/cli版本：

npm i -g @vue/cli

在这里插入图片描述
查看版本号：

vue -V

在这里插入图片描述

创建 Vue-Cli工程

Ctrl+反引号建打开终端（ESC下面键）

用cd切换路径命令选择要进入的文件夹

输入命名创建一个名为 test 的 Vue.js 项目，test 是工程名（注意：工程名必须全部小写）

vue create test

回车后选择（向下箭头选择）最后一个（自定义）
在这里插入图片描述

再次点击回车后：按空格键取消( * ) Linter / Formatter
在这里插入图片描述

再次回车后：默认选中3.x
在这里插入图片描述

回车后选择第二项：
在这里插入图片描述

最后一项输入n，不保存
在这里插入图片描述

再点回车创建项目
在这里插入图片描述

项目创建完成：
在这里插入图片描述

随后输入提示的命令
在这里插入图片描述

回车后显示的页面：显示成功启动
通过下面的两个地址可以访问项目
在这里插入图片描述

Ctrl+左键单击访问
在这里插入图片描述
停止项目访问：Ctrl+c

再次访问首先cd到要访问的文件夹（项目）下输入命令：

npm run serve

Ctrl+反引号是关闭或打开终端

打开项目：
在这里插入图片描述

其中根组件App.vue文件是核心由三部分组成：

template：写的是HTML
script：写的是动态脚本JS
style：写的是样式CSS

下面在根组件App.vue文件中改一下东西：

在template标签删掉HelloWorld标签并中加入：

<h1>App.vue是根组件{{ name }}</h1>

在script标签中加入：

  data() {return {name: '，你好'}},

在style标签中加入：

h1{background-color: pink;
}

最后打开终端：
在这里插入图片描述

创建 Vue 的基本模板

文件→首选项→配置用户代码片段
在这里插入图片描述
搜索vue.json文件
如果没有就新建全局代码片段文件，输入框中输入vue新建一个

要么就选择全局回车
在这里插入图片描述
然后在打开的页面中的大片注释内容及其大括号全部（Ctrl+a）删掉，把下面代码全部粘贴上去

{"Print to console": {"prefix": "vue","body": ["<template>","  <div>","  </div>","</template>","","<script>","export default {","  data () {","    return {","","    }","  },","  methods: {","","  },","  components: {},","  computed: {},","  watch: {},","  mounted () {}","}","</script>","<style scoped>","</style>"],"description": "Log output to console"}