从零开始新建一个vue项目

m0_71439861

已于 2024-12-15 19:02:26 修改

阅读量2.3k

点赞数 14

文章标签： vue.js 前端

于 2024-12-15 01:19:51 首次发布

本文链接：https://blog.youkuaiyun.com/m0_71439861/article/details/144478064

版权

要创建一个Vue项目，您可以使用Vue CLI（命令行界面）或Vite（新一代前端构建工具）。以下是使用这两种工具创建Vue项目的详细步骤：

一、使用Vue CLI创建Vue项目

安装Node.js：Vue CLI依赖于Node.js，因此首先需要安装Node.js。您可以从Node.js官方网站下载适合您操作系统的安装程序，并按照提示进行安装。
全局安装Vue CLI：打开命令行工具，运行以下命令安装Vue CLI：
```
npm install -g @vue/cli
```
创建Vue项目：选择一个目录，进入该目录后，运行以下命令创建一个新的Vue项目：
```
vue create my-vue-app
```
这将提示您选择预设配置。您可以选择默认预设，它包含了基本的Babel和ESLint设置，也可以选择手动选择特性来自定义您的项目配置。
启动项目：进入项目目录，运行以下命令启动开发服务器：
```
cd my-vue-app
npm run serve
```
注：使用npm run serve命令运行前，一定要先cd进创建好的项目里，vite创建同理
这将启动一个本地开发服务器，您可以在浏览器中访问http://localhost:8080来查看您的Vue应用。

二、使用Vite创建Vue项目

安装Node.js：同样，首先需要安装Node.js。
使用npm创建项目：打开命令行工具，运行以下命令创建一个基于Vite的Vue项目：
```
npm init vue@latest
```
这将提示您输入项目名称、是否添加TypeScript支持、是否添加JSX支持、是否添加Vue Router、是否添加Pinia状态管理、是否添加Vitest单元测试、是否添加端到端测试以及是否添加ESLint进行代码质量检查等选项。您可以根据需要选择相应的选项。
安装依赖：进入项目目录，运行以下命令安装项目依赖：
```
cd my-vue-app
npm install
```
启动项目：安装完成后，运行以下命令启动项目：
```
npm run dev
```
这将启动一个本地开发服务器，您可以在浏览器中访问http://localhost:5173来查看您的Vue应用。

以上就是使用Vue CLI和Vite创建Vue项目的基本步骤。

三、遇到的常见问题及解决方法

问题一、node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

1、在 Windows 搜索栏中搜索并打开 "环境变量"。

2、在 "系统变量" 部分，找到名为 "Path" 的变量，并点击 "编辑"。

3、检查是否包含了 Node.js 的安装路径（例如：C:\Program Files\nodejs）。

4、如果没有找到该路径，请点击 "新建" 并添加 Node.js 的安装路径。

5、点击 "确定" 保存更改。

问题二、安装cnpm报错

解决方式：

1、在系统中搜索框输入 Windos PowerShell

2、点击“管理员身份运行”

3、输入“ set-ExecutionPolicy RemoteSigned”回车

4、根据提示，输入A，回车

5、再次回到cnpm -v执行成功

四、基本语法

插值表达式：使用双大括号 {{ }} 将数据绑定到模板中。
指令系统：如 v-bind（用于绑定 HTML 属性，可以简写为 :）、v-model（用于在表单元素上创建双向数据绑定）、v-if / v-else-if / v-else（条件渲染指令）、v-for（循环渲染指令）、v-on（绑定事件监听器，简写为 @）等。
组件系统：Vue.js 允许将 UI 拆分为独立的、可复用的组件。组件可以通过 Vue.component 方法或单文件组件（.vue 文件）的形式创建。
路由（Vue Router）：用于管理页面间的导航和组件的渲染。通过 router-link（对 a 标签的封装，用于创建导航链接）和 router-view（显示路由访问到的指定组件）来实现。
状态管理（Vuex）：Vue 的官方状态管理模式，用于集中存储所有组件的共享状态。

实例化 Vue

Vue 的核心是 Vue 实例，它将数据和视图（HTML）进行绑定。创建 Vue 实例的基本方式如下：

new Vue({
  el: '#app', // 指定 Vue 实例挂载的 DOM 元素
  data: {
    message: 'Hello, Vue!' // Vue 实例的数据
  }
});

数据绑定

Vue 的数据绑定是其最核心的特性之一。它使得数据和视图紧密耦合，并且通过双向绑定实现自动更新。例如：

<div id="app">
  <input v-model="message">
  <p>输入的内容是: {{ message }}</p>
</div>

计算属性

Vue 的计算属性是基于它们的依赖进行缓存的。也就是说，只有当相关的依赖数据发生变化时，计算属性才会重新计算。例如：

new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: ''
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

方法与事件处理

Vue 使得事件处理和方法定义变得简单。可以通过 methods 定义方法，并使用 v-on 指令来绑定事件。例如：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    greet: function() {
      this.message = 'Hello, World!';
    }
  }
});

生命周期钩子

Vue 实例有一系列生命周期钩子，允许开发者在不同的阶段执行特定的操作。常见的生命周期钩子包括 created、mounted、updated 和 destroyed。例如：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  created: function() {
    console.log('Vue 实例已创建');
  },
  mounted: function() {
    console.log('Vue 实例已挂载');
  }
});