创建Vue项目(demo)教程

如何创建个人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: 效果展示:
在这里插入图片描述

  • 初始化项目各文件与文件夹说明
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Kinrun/article/details/126727436