脚手架(vue-cli)创建Vue项目的超详细过程记录

脚手架(vue-cli)创建Vue项目的超详细过程记录

什么是 Vue-cli

Vue-cli 是一个命令行工具,通过它可以快速创建新的 Vue 工程。Vue-cli 其实是一个基于 Node.js 的命令行工具,封装了 Vue.js 相关的项目创建流程,可以帮助我们快速的创建一个 Vue.js 项目。

安装 Vue-cli

在安装 Vue-cli 之前,首先要确保 Node.js 已经安装好了。可以通过在终端里输入node -v来查看 Node.js 是否安装成功。安装完 Node.js 之后,我们就可以通过 Node.js 自带的包管理工具 npm 来安装 Vue-cli 了。

在终端里输入以下命令安装 Vue-cli:

npm install -g @vue/cli

创建 Vue 项目

安装完 Vue-cli 之后,就可以来创建自己的第一个 Vue 项目了。 在终端里输入以下命令:

vue create project-name

其中,project-name是你自己想起的命名,可以直接输入项目名称,然后回车即可。

这个命令会在当前目录下创建一个名为 project-name 的文件夹,并在这个文件夹里生成 Vue 项目的基本结构。

除了使用默认配置创建项目之外,还可以使用自定义配置来创建项目。

vue create -p default project-name

其中 -p default 表示要使用默认配置创建项目,project-name 是你自己的项目名称。

项目的目录结构

使用 Vue-cli 创建 Vue 项目时,会生成默认的目录结构:

├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── views
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── package-lock.json

其中,各个文件夹的作用如下:

  • node_modules:存放项目依赖模块的文件夹。
  • public:存放静态文件的文件夹,其中 index.html 是项目的入口文件。
  • src:存放项目源码的文件夹。
  • assets:存放静态资源文件,比如图片、字体等。
  • components:存放组件文件夹。
  • views:存放页面文件夹。
  • App.vue:项目的根组件。
  • main.js:项目的入口文件,初始化 Vue 实例并挂载根组件。
  • .gitignore:git 忽略文件,用来管理 git 版本控制。
  • babel.config.js:babel 配置文件。
  • package.json:存放项目的基本信息和依赖列表的文件。
  • README.md:项目的说明文件。
  • package-lock.json:npm 安装依赖时生成的锁定文件。

示例说明

示例1:使用默认配置创建项目

  1. 在终端里输入以下命令,安装 Vue-cli:
npm install -g @vue/cli
  1. 创建项目:
vue create my-project
  1. 选择默认的配置,回车即可。

  2. 等待一段时间(时间会根据用户的联网速度而有所不同),创建完成后可以打开 my-project 文件夹,使用代码编辑器(比如 VS Code)来打开,进入项目所在的终端窗口,输入以下命令,启动项目:

npm run serve
  1. 在浏览器中打开http://localhost:8080/,就可以看到 Vue 默认的欢迎页面了。

示例2:使用自定义配置创建项目

  1. 在终端里输入以下命令,安装 Vue-cli:
npm install -g @vue/cli
  1. 创建项目:
vue create -p default my-project
  1. 根据需要选择 Vue 3.0 版本或者使用 Babel 转译器。

  2. 选择需要的特性,可以参考Vue 3.0 官方文档

  3. 如果需要,选择需要安装的插件,可以手动选取或全部使用默认。

  4. 选择自定义的 CSS 预处理器。

  5. 是否选择使用单元测试,选择 No。

  6. 是否选择使用 E2E 测试,选择 No。

  7. 是否将配置写入 package.json,选择 Yes。

  8. 等待一段时间(时间会根据用户的联网速度而有所不同),创建完成后可以打开 my-project 文件夹,使用代码编辑器(比如 VS Code)来打开,进入项目所在的终端窗口,输入以下命令,启动项目:

npm run serve
  1. 在浏览器中打开http://localhost:8080/,就可以看到 Vue 默认的欢迎页面了。

结论

Vue-cli 是一个非常方便的工具,通过它可以帮助我们快速创建一个 Vue 项目,并可以根据需要使用不同的配置来创建项目。总之,Vue-cli 的出现可以极大的提高我们的开发效率。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:脚手架(vue-cli)创建Vue项目的超详细过程记录 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • vue绑定class与行间样式style详解

    Vue绑定class与行间样式style详解 在Vue中,我们可以通过v-bind指令来绑定元素的class和行间样式style,实现动态控制页面样式的效果。 绑定class 对象语法 在模板中,使用v-bind:class指令来绑定class。当对象中的属性值为true时,class会被应用到元素上,反之该class不会被应用。 示例代码如下: <t…

    Vue 2023年5月27日
    00
  • elementui导出数据为xlsx、excel表格

    ElementUI是一款基于Vue.js的组件库,提供了丰富的UI组件,其中也包含了导出Excel表格的功能。下面是ElementUI导出数据为xlsx、excel表格的详细攻略: 第一步:安装依赖 首先,在项目中导出Excel表格需要安装以下依赖: npm install -S file-saver xlsx 其中,file-saver用于文件下载,xls…

    Vue 2023年5月27日
    00
  • Vue.js在数组中插入重复数据的实现代码

    在Vue.js中,要向数组中插入数据需要使用Vue.set或者.splice方法,而如果需要插入重复数据,可通过以下实现代码: // 定义一个空数组 let arr = []; // 添加第一个元素 arr.push(1); // 添加第二个元素,即重复元素 Vue.set(arr, 1, 1); 上述代码中,我们首先定义了一个空数组arr,并向其中添加了一…

    Vue 2023年5月29日
    00
  • 关于vue-property-decorator的基础使用实践

    下面我将详细讲解“关于vue-property-decorator的基础使用实践”的完整攻略,以及两条示例说明。 什么是vue-property-decorator vue-property-decorator 是 Vue.js TypeScript 类组件的实用装饰器,它提供了一些诸如 @Prop、@Component 等装饰器,简化了我们对 Vue 组件…

    Vue 2023年5月27日
    00
  • vue+element的表格实现批量删除功能示例代码

    下面是 “vue+element的表格实现批量删除功能示例代码” 的完整攻略: 1. 安装 Element UI 和 Axios 在开始之前,你需要先安装 Element UI 和 Axios,可以使用 npm 来安装: npm install element-ui axios –save 同时在文件中引入: import Vue from ‘vue’ i…

    Vue 2023年5月28日
    00
  • vue如何向后台传递日期

    下面我将向你详细讲解“vue如何向后台传递日期”的完整攻略。 步骤一:获取日期并格式化 为了准确地向后台传递日期,第一步是要获取日期并将其格式化。在 Vue 组件中,我们可以使用 moment.js 库来解决这个问题。这里需要安装 moment.js 库,可以使用以下命令: npm install moment –save 然后,我们在 Vue 组件中使用…

    Vue 2023年5月28日
    00
  • vue终极性能优化方案(解决首页加载慢问题)

    我来为您讲解一下“Vue终极性能优化方案(解决首页加载慢问题)”的完整攻略。 首页加载慢问题 在开发Vue项目时,有时候我们会遇到首页加载慢的问题,这是因为我们的网页存在大量的CSS和JS文件,导致浏览器需要下载很多文件才能显示页面。为了解决这个问题,我们可以从多个方面入手进行优化。 代码分割 代码分割是一种常用的优化手段,可以将应用程序分成小块,只加载当前…

    Vue 2023年5月27日
    00
  • 在vue中,v-for的索引index在html中的使用方法

    在vue中,v-for指令允许我们遍历数组或对象,并根据每个元素生成相应的DOM节点。当我们遍历一个数组时,可以通过v-for指令获取每个元素对应的索引index值,在渲染DOM节点时可以使用该索引值。 v-for索引index在HTML中的使用方法 在HTML结构中,我们可以使用 {{ }} 语法来引用v-for指令中的索引index值。例如: <d…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部