如何从0搭建vue项目以及组件测试

前提：node.js，npm 已经安装,我的版本：

1.镜像源下载（提速，可下可不下）

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

下载完后cnpm -v检查是否安装成功。

2.vue的全局安装

npm install -g @vue/cli 

开始创建 具体项目

1.在任意文件夹打开cmd，输入

vue creat “任意项目名”

2. 选择vue3框架，（如果有些配置错了，在配置文件里可以更改），回车

 3.下载完成后在编辑器中打开文件夹，同时确保路径无中文(一定要无中文！！！！)

直接npm run serve检查运行。

运行结果：

 

 4.测试组件样例

A.删除  ./components/HelloWorld.vue 这个vue文件，根组件App.vue只保留三层基本结构。

 你可以直接在此文件下测试组件。

B.在写组件时，你可能要引用第三方库的组件，本项目组件以Element Plus为主，（不是element ui，该组件库当前主要支持Vue 2.x版本）

首先，利用npm下载相关组件库到依赖，以Element Plus为例：

npm install element-plus

安装的包名称和版本号将自动添加到package.json文件的dependencies部分

 "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.3.9",
    "vue": "^3.2.13"
  },

添加其他的依赖也是一样，你可以在这里面查看、管理版本。

C.现在添加了相关了组件库，你可以使用其中的元素制造你自己的组件，

找到想要的组件后我们查看代码：

        截取它的代码段并且根据此加以修改，修改过程中遇到的问题可以上网去搜，一般都有很多样例，这里scipt层中引入你需要的组件 ，他的这段代码实质上是告诉你这些小组件的组合方式。

        这里我略作修改：

<template>
  <div>
    <el-radio-group v-model="selectedOption" @change="handleChange">
      <el-radio :label="option1">选项1</el-radio>
      <el-radio :label="option2">选项2</el-radio>
      <el-radio :label="option3">选项3</el-radio>
      <el-radio :label="option4">选项4</el-radio>
    </el-radio-group>
    <p>你选择的选项是: {{ selectedOption }}</p>
  </div>
</template>

<script>
import { ElRadio, ElRadioGroup } from 'element-plus';

export default {
  components: {
    ElRadio,
    ElRadioGroup,
  },
  data() {
    return {
      selectedOption: 'option1',
      option1: '选项1',
      option2: '选项2',
      option3: '选项3',
      option4: '选项4',
    };
  },
  methods: {
    handleChange() {
      // 这里可以添加处理选项变化的逻辑
      console.log('选项已改变：', this.selectedOption);
    },
  },
};
</script>

<style></style>

终端npm run serve网页显示如下:

D.到这里，你已经可以写一个简单的静态组件了，但是不能和后端交互！

     流程总结：确定大概结构--->用html语言写出框架--->scipt层逻辑构建以及注册引用的组件导入依赖（实质上就是导入需要的代码块）--->style层样式调整

 

最后是一些报错参考解决博客：

node版本过高问题

npm install出现npm ERR(包含三个常见问题)

强调两个基本注意事项：要在项目所在最后一级文件夹下打开终端，不然会找不到json文件；其次，不要使用中文路径。