AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

如何创建一个Vue项目（手把手教你）

2024-08-16 92
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章是一篇手把手教读者如何创建Vue项目的教程，包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤，并提供了一些常见第三方库的引入方法。

前提安装好了开发环境、如果未安装好。请安装好后、来看

1、管理员身份打开窗口

在这里插入图片描述

2、找到要存放项目的地址

在这里插入图片描述

3、初始化项目

vue init webpack SCI

如果连接公司内网（可能失败）
在这里插入图片描述
在这里插入图片描述

4、填写项目的一些基本信息

这些安装的可以都不选、后期需要哪一部分直接npm就行、很方便。文件名要小写，否则报错

在这里插入图片描述

5、进入工程目录

cd sci

在这里插入图片描述

6、启动项目

npm run dev

在这里插入图片描述

7、页面效果

在这里插入图片描述

8、查看创建的项目

在这里插入图片描述

9、引入第三方库

常用的axios、elementui、vuex、avux等等。都可以通过npm 的形式加入的项目中（尽量使用管理员来执行这些命令、否则可能会提示权限不足、安装失败的情况）

10、后语

学无止境。。。。。。

文章标签：
JavaScript
关键词：
vue项目VUE.js
项目VUE.js
热爱技术的小郑
目录
相关文章
你都不懂
|
3天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
你都不懂
18 2
刘大猫.
|
2天前
|
缓存 JavaScript 前端开发
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
刘大猫.
10 3
chnjames
|
4天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南：in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令，但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似，但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异，你将能够编写更加高效、简洁的 Vue.js 代码，灵活应对各种数据结构的遍历需求。
chnjames
40 6
mao29955
|
1天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项，它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别，可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中，要根据具体情况灵活选择使用，以满足不同的需求。
mao29955
5 2
大树营养快线
|
1天前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具，使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令，可以提高开发效率，增强应用的功能和用户体验。
大树营养快线
7 1
dufadayang
|
2天前
|
JavaScript
vue生命周期钩子函数的执行顺序是怎样的？
【10月更文挑战第14天】
dufadayang
6 2
chnjames
|
4天前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表，支持用户动态添加设备部位和任务，并提供相应的表单验证规则。
chnjames
23 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
刘大猫.
|
19小时前
|
JavaScript 前端开发 Java
vue2知识点：Vue封装的过度与动画
vue2知识点：Vue封装的过度与动画
刘大猫.
7 0
大树营养快线
|
1天前
|
JavaScript UED
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令，可以为 Vue 应用带来更多的灵活性和扩展性，提高开发效率和用户体验。
大树营养快线
7 0
游客zi3qmblbcdexu
|
3天前
|
JavaScript 前端开发 容器
vue的哈希模式下乾坤微应用的使用
vue的哈希模式下乾坤微应用的使用
游客zi3qmblbcdexu
6 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    使用vue-demi来开发一个vue2和vue3组件
  • 3
    OSS对象存储后端实现+Vue实现图片上传【基于若依管理系统开发】
  • 4
    docker nginx 部署 vue项目
  • 5
    vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
  • 6
    浅尝Vue最新状态管理工具Pinia(实战使用Pinia管理登录状态)
  • 7
    VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
  • 8
    vue2 el-select 改造成下拉树，支持数据回显
  • 9
    解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
  • 10
    手撸vue3核心源码——响应式原理(ref)
  • 1
    搞懂Vue一篇文章就够了
    37
  • 2
    Vue3的 组件事件
    52
  • 3
    Vue 异步组件
    31
  • 4
    Vue自定义指令的三个方法
    31
  • 5
    vue3组件之间传值通讯
    48
  • 6
    vue引入vuex
    53
  • 7
    vue怎么自定义底部导航
    58
  • 8
    vue3引入element-plus完整步骤
    646
  • 9
    vue3引入vant完整步骤
    410
  • 10
    vue3实现文字垂直滚动
    176

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 零基础入门Serverless：TodoList应用创建
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片