创建Vue项目(demo)教程

最新推荐文章于 2024-07-10 13:59:17 发布
最新推荐文章于 2024-07-10 13:59:17 发布
阅读量2k 收藏 9
点赞数 1
文章标签： vue.js 前端 前端框架 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kinrun/article/details/126727436
版权
本文介绍了如何从环境准备到项目运行，一步步创建并运行一个个人Vue Demo项目。首先，你需要安装Node.js和cnpm，然后通过Vue CLI创建项目，选择配置信息，最后在编辑器中打开项目并使用npm run serve启动。项目创建过程中涉及的关键技术包括Vue、npm管理和前端项目初始化。
摘要由CSDN通过智能技术生成

如何创建个人Demo

1: 环境准备

安装node.js

node官网: https://nodejs.org/zh-cn/

安装完成后查看版本
打开 cmd 命窗口,使用 node -v 查看版本号
出现版本号即安装成功

node -v

npm -v

安装淘宝镜像: 
npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
为什么使用cnpm?
两者只是node中包管理器的不同, npm是node官方版的包管理器, cnpm是中国版的npm, 是淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的npm
简单理解为cnpm更加快速一点

2: 创建文件夹作为项目容器

1: 创建文件夹
在这里插入图片描述
2: 进入文件夹右键打开命令行
在这里插入图片描述
3: 在终端里输入命令开始创建自己的vue项目
vue create + 自定义项目名

vue create demo

在这里插入图片描述
4: 选择配置信息 使用上下方向键选择 确定后回车继续下一步
在这里插入图片描述
5: 等待安装

在这里插入图片描述
6: 安装成功
在这里插入图片描述

3: 安装成功后使用编辑器打开该文件

注意提示 npm run serve 为项目运行命令
如何分辨npm run serve 还是npm run dev ?
打开编辑器, 找到项目文件的位置并打开
在这里插入图片描述
在这里插入图片描述
在package.json文件中查看
在这里插入图片描述

4: 运行项目

1: 到创建文件夹目录下使用npm run serve 运行
在这里插入图片描述
2: 用浏览器打开
使用ctrl+鼠标左键单击http://localhost:8080/即可打开
3: 效果展示:
在这里插入图片描述

  • 初始化项目各文件与文件夹说明
    在这里插入图片描述
祁一枝
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue学习教程及demo
09-17
VUE学习PPT及自己练习的demo,包含实例和生命周期/常用指令/属性和方法/过度及动画/组件/路由 vue-devtools.zip
vue 2.0写的一个小demo
12-19
项demo中基本用到所有Vue的基本功能,比如,双向绑定,渲染列表,数据绑定,组件,自定义指令,消息传递,条件渲染等,运行方法见 readme
快速创建一个Vue项目并运行
weixin_50801860的博客
10-07 1502
1、电脑首页搜索输入“cmd”，选择命令提示符（cmd），回车进入命令提示符（cmd）界面。2、输入所创建项目的目录，我这里选择E盘，输入“E:”，回车。3、输入“vue create demo”并回车创建项目，其中demo是项目名。项目正在创建。。。4、创建成功后进入E盘目录发现新建了一个名为demo的文件夹。5、输入“cd demo”打开demo项目。6、输入“cnpm run serve”运行项目。​
vue大屏项目基础模板，前端驾驶舱demo，完整代码分享
Yy55gc25112的博客
07-10 656
前端vue大屏基础模板。快速开发复制粘贴直接搞定
从零开始创建Vue项目(附带模板Demo)
Aiden的笔记本
03-20 1729
本文为新手向教程，详细介绍如何从零开始创建一个Vue项目，并附带空项目模板，模板包括路由配置和设计，请求后端方法的封装等，方便直接上手使用。
创建 vue 项目
qq_39939748的博客
01-13 316
【代码】创建 vue 项目。
Vue 创建脚手架项目
PrimaryColor
07-15 374
1.进入要创建的文件的目录，在此目录打开终端。 2.输入命令： vue create demo //demo：项目名 图： 3.选择最后一项“Manually select features”自定义创建项目，如下图，按回车。 4.出现下图时，选择第1,4,5,6项，空格选择，选择完成后按回车。 5.出现如下图，输入“y”，按回车。 6.出现如下图，选择第二项“Sass/SCSS”，按回车。 7.出现如下图，选择第一项“In dedicated config files”，按回车。 8.出现如
Vue创建Demo项目
weixin_41924879的博客
02-01 1458
Vue创建Demo项目
vue的项目搭建demo
Hacker-Prince
09-11 2586
一、安装node环境 　　1、下载地址为：https://nodejs.org/en/ 　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 　　 　　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 　　 　　检查是否安装成功：
一个vue小demo代码介绍
左直拳的马桶_日用桶
10-15 1330
上篇文章说道，前段时间忙里偷闲，试了一下vue，搞了个小demo作为练习。原本以为很简单，但实际上耗费时间超出我的想象。如果有客观原因，是vue有自己的私货，另外一个就是缺乏完整的示例，帮助文档搞成手册形式，例子很少，即使有也是支离破碎。再就是所谓免费开源的东西，内容和版本都有点随心所欲，很容易就不被支持，玩似的。 闲话休提。先给出demo的样子。demo很简单，就2个页面，再加一个弹窗，但麻雀虽小，demo里也包含了母版页，部件，路由，以及使用了jquery和国产界面框架layUI。 一、成果 1、首页
vue中指令写了一个demo
weixin_30376323的博客
01-25 92
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令</title> <link rel="stylesheet" href="vlib/css/index.css"> &lt...
Vue学习demo
06-28
Vue学习demo，涵盖基本指令、计算属性，方法，路由，组件等一个个的小demo，渐进式学习很有帮助。
VueDemo:Vue演示
05-10
VueDemo 一个Vue.js项目 安装模块 npm install swiper --save-dev npm i element-ui -S npm install axios 构建设置 # install dependencies npm install # serve with hot reload at localhost:8090 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 测试 打开 拓展阅读
vue项目demo
11-22
VUE项目的demo例子，便于自己随时可以下载下来学习和研究
vue3 demo.zip
12-05
3. "vue3-basic-master"：这是一个基础的Vue3教程项目，涵盖了Vue3的核心概念，如setup函数、Composition API、生命周期钩子函数、ref和reactive等。开发者可以在此项目中逐步学习Vue3的基本用法和最佳实践。 4. ...
test_vue教程_DEMO_vue教程入门_vue_
10-01
Vue项目通常使用`.vue`单文件组件，包含模板、脚本和样式，使得代码结构清晰。 10. **单元测试** Vue生态中的Jest或Mocha+Chai等工具，可以帮助进行组件的单元测试，确保代码质量。 这个“test_vue教程_DEMO_vue...
vue-demovue-demovue-demo
10-25
"vue-demovue-demovue-demo"可能是某个关于Vue.js的示例项目或者教程，通过创建多个“demo”来展示Vue.js的不同功能和用法。 1. **Vue.js基础概念**： - **虚拟DOM**：Vue.js使用虚拟DOM来提高应用性能，减少对...
ct-ts-vue-demo_DEMO_vue-ts_vuetsdemo_
09-29
使用`vue-cli`脚手架创建Vue项目时，可以选择预装TypeScript的模板。在命令行中运行`vue create ct-ts-vue-demo --typescript`，这将创建一个包含TypeScript配置的Vue项目。 2. **配置Vue与TypeScript**： 在`...
vue 入门 demo
最新发布
07-20
Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子： 首先，你需要安装Vue CLI（命令行工具）来创建新的项目。如果你还没有安装，可以这样做： ```bash npm install -g @vue/cli ``` 然后创建一个新的Vue应用： ```bash vue create my-vue-app ``` 接下来，进入项目目录并启动服务： ```bash cd my-vue-app npm run serve ``` 现在打开浏览器访问`http://localhost:8080`，你会看到一个空白页面。我们来编写一个基本的Vue组件： 在`src/App.vue`文件中添加以下内容： ```html <template> <div id="app"> <h1>{{ message }}</h1> <button v-on:click="sayHello">点击我</button> </div> </template> <script> export default { data() { return { message: '你好，Vue世界！' }; }, methods: { sayHello() { this.message = 'Hello Vue!'; } } }; </script> <style> #app { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; } </style> ``` 在这个例子中，我们定义了一个数据属性`message`，并在模板中显示。当用户点击按钮时，`sayHello`方法会被触发，更新`message`的值。 这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值