Vue-cli脚手架

桃扇骨 2023-10-13 08:53 23阅读 0赞

### 文章目录 ###

*  前言
 *  搭建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][Node.js] ，然后傻瓜式安装  
`提示：以下是本篇文章正文内容，下面案例可供参考`

**Ctrl+反引号建打开终端**（ESC下面键）  
输入：`npm`  
![在这里插入图片描述][295ee9a5417f46b087f1a19e9e18deaf.png]

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

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

②、如果是以下报错：  
![在这里插入图片描述][a144f1d51a154ff8aacb54218ca6d0f6.png]  
在电脑下面的搜索框中搜索`pwe`，打开Windows PowerShell  
![在这里插入图片描述][1465598d992443f09d54eb1cc96cedb1.jpeg]  
输入：

set-ExecutionPolicy RemoteSigned

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

回到VS Code再次运行`npm`

### 国内淘宝镜像服务器 ###

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

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

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

首先复制下面代码：（还有这个镜像源可能会快一些：npm config set registry http://registry.npmmirror.com）

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

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

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

npm config get registry

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

## 全局安装 vue-cli ##

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

安装最新@vue/cli版本：

npm i -g @vue/cli

![在这里插入图片描述][06f461a07731444cbeb033ba0efd8401.jpeg]  
查看版本号：

vue -V

![在这里插入图片描述][2bd70d3306fb42ed9cffcea93592058f.png]

## 创建 Vue-Cli工程 ##

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

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

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

vue create test

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

再次点击回车后：按空格键取消`( * ) Linter / Formatter`  
![在这里插入图片描述][1d478fa0753e491ba5516359dc557732.png]

再次回车后：默认选中`3.x`  
![在这里插入图片描述][be0b5d47d4144c209309582e914e28a9.png]

回车后选择第二项：  
![在这里插入图片描述][d4ff429f7619458b9e343597aea3cf57.png]

最后一项输入n，不保存  
![在这里插入图片描述][dc04c22b67fc42e5a16d1b5f172c2fc9.png]

再点回车创建项目  
![在这里插入图片描述][dd5bffd1338b4bf7b9bf8fc17b96afda.png]

项目创建完成：  
![在这里插入图片描述][679dcbcb0e0242a485929ffcf60f096d.png]

**随后输入提示的命令**  
![在这里插入图片描述][bf59fce491b741198e2f5d76cac0c527.png]

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

Ctrl+左键单击访问  
![在这里插入图片描述][736e75e5b0144e5c9c897f6a1111a2bc.png]  
**停止项目访问：`Ctrl+c`**

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

npm run serve

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

打开项目：  
![在这里插入图片描述][e819a9972a0c4445b77f415d8f367327.png]

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

1.  `template`：写的是HTML
2.  `script`：写的是动态脚本JS
3.  `style`：写的是样式CSS

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

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

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

在script标签中加入：

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

在style标签中加入：

h1{
        
      background-color: pink;
    }

最后打开终端：  
![在这里插入图片描述][8d9404dc3337451397e40a551665f31e.png]

## 创建 Vue 的基本模板 ##

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

要么就选择全局回车  
![在这里插入图片描述][f98304e71dd94a47a0cf6d4275992bd4.png]  
然后在打开的页面中的大片注释内容及其大括号全部（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"
    	}

可以通过在 Visual Studio Code 的编辑器中键入 “vue”，然后按下 回车键 来使用该代码片段

等下次无论是创建子组件还是自带的父组件，都可以用vue重新生成

# 总结 #

## 终端打开/关闭操作 ##

Ctrl+反引号只是关闭了终端页面，启动的服务还是存在  
Ctrl+c关闭了终端并不是关闭了

## 创建Vue-Cli工程过程 ##

![请添加图片描述][84e6b57e70a0404ea5f382aca8b082d6.gif]  
一般来讲会删掉HelloWorld.vue文件，删掉App.vue中所有代码，然后输入vue重新生成（无论父子组件）

[Vue CLI]: https://cli.vuejs.org/zh/
[Node.js]: https://nodejs.cn/download/
[295ee9a5417f46b087f1a19e9e18deaf.png]: https://img-blog.csdnimg.cn/295ee9a5417f46b087f1a19e9e18deaf.png
[fdaebd87a3da4dc892c2de7c901abfa1.png]: https://img-blog.csdnimg.cn/fdaebd87a3da4dc892c2de7c901abfa1.png
[a144f1d51a154ff8aacb54218ca6d0f6.png]: https://img-blog.csdnimg.cn/a144f1d51a154ff8aacb54218ca6d0f6.png
[1465598d992443f09d54eb1cc96cedb1.jpeg]: https://img-blog.csdnimg.cn/1465598d992443f09d54eb1cc96cedb1.jpeg
[7ef9d93832254701b516d7d472e70d57.jpeg]: https://img-blog.csdnimg.cn/7ef9d93832254701b516d7d472e70d57.jpeg
[e2a82bf09b1345a7b1b700fe65f8492d.jpeg]: https://img-blog.csdnimg.cn/e2a82bf09b1345a7b1b700fe65f8492d.jpeg
[06f461a07731444cbeb033ba0efd8401.jpeg]: https://img-blog.csdnimg.cn/06f461a07731444cbeb033ba0efd8401.jpeg
[2bd70d3306fb42ed9cffcea93592058f.png]: https://img-blog.csdnimg.cn/2bd70d3306fb42ed9cffcea93592058f.png
[f67dc05174224ac8a55b507d00f723f1.png]: https://img-blog.csdnimg.cn/f67dc05174224ac8a55b507d00f723f1.png
[1d478fa0753e491ba5516359dc557732.png]: https://img-blog.csdnimg.cn/1d478fa0753e491ba5516359dc557732.png
[be0b5d47d4144c209309582e914e28a9.png]: https://img-blog.csdnimg.cn/be0b5d47d4144c209309582e914e28a9.png
[d4ff429f7619458b9e343597aea3cf57.png]: https://img-blog.csdnimg.cn/d4ff429f7619458b9e343597aea3cf57.png
[dc04c22b67fc42e5a16d1b5f172c2fc9.png]: https://img-blog.csdnimg.cn/dc04c22b67fc42e5a16d1b5f172c2fc9.png
[dd5bffd1338b4bf7b9bf8fc17b96afda.png]: https://img-blog.csdnimg.cn/dd5bffd1338b4bf7b9bf8fc17b96afda.png
[679dcbcb0e0242a485929ffcf60f096d.png]: https://img-blog.csdnimg.cn/679dcbcb0e0242a485929ffcf60f096d.png
[bf59fce491b741198e2f5d76cac0c527.png]: https://img-blog.csdnimg.cn/bf59fce491b741198e2f5d76cac0c527.png
[6d4934dfa6bc4520807a3bacbc617a06.png]: https://img-blog.csdnimg.cn/6d4934dfa6bc4520807a3bacbc617a06.png
[736e75e5b0144e5c9c897f6a1111a2bc.png]: https://img-blog.csdnimg.cn/736e75e5b0144e5c9c897f6a1111a2bc.png
[e819a9972a0c4445b77f415d8f367327.png]: https://img-blog.csdnimg.cn/e819a9972a0c4445b77f415d8f367327.png
[8d9404dc3337451397e40a551665f31e.png]: https://img-blog.csdnimg.cn/8d9404dc3337451397e40a551665f31e.png
[224ab163a4c842a28d5ff5fe943f37bd.png]: https://img-blog.csdnimg.cn/224ab163a4c842a28d5ff5fe943f37bd.png
[f98304e71dd94a47a0cf6d4275992bd4.png]: https://img-blog.csdnimg.cn/f98304e71dd94a47a0cf6d4275992bd4.png
[84e6b57e70a0404ea5f382aca8b082d6.gif]: https://img-blog.csdnimg.cn/84e6b57e70a0404ea5f382aca8b082d6.gif