如何创建一个VUE项目(完整流程并附详细截图)

如何创建一个VUE项目(完整流程并附详细截图)

以下是创建vue项目的一套详细流程,项目中初始化时就配有webpack打包
这个流程是正常开发项目所需要走的一套完整的的流程,我自己也反复按照以上步骤操作几次,都能创建项目。
只是在安装依赖时需要稍微多等一些时间,如果遇到安装是进度条缓慢可以稍微等等。
如遇进度条一直不动,可以关闭命令行重新执行一次。

目录结构:

  • 安装环境
  • 镜像准备

  • 项目初始化

  • 启动项目

一、环境安装

1.安装node.js(https://nodejs.org/en/)

2.关于npm相关介绍—参考(https://www.runoob.com/nodejs/nodejs-npm.html)

1.最新版的nodejs已经集成了npm,所以在安装node时已经将npm一并安装。
2.版本查看
node版本查看  node -v
npm版本查看   npm -v

在这里插入图片描述

二、镜像准备

淘宝镜像使用命令———提升下载包速度

npm install -g cnpm --registry=https://registry.npm.taobao.org
执行命令如遇进度条缓慢,适当等一等,如一直没加载好,可以关闭再打开命令行重新执行。

在这里插入图片描述

三、项目初始化

1.全局安装 vue-cli
npm install --global vue-cli

在这里插入图片描述

2.执行初始化
2.1 进入桌面(具体看项目创建在什么位置)
具体看项目存放位置,这里以桌面为例,执行cd Desktop
2.2 创建一个基于 webpack 模板的新项目
vue init webpack 项目名
注意项目名不要有大写字母
2.3配置选项
Project name 项目名
Project description项目描述
Author 作者
Vue build standalone 生产环境打包方式 
Install vue-router 安装vue路由
Use ESLint to lint your code 使用ESLint校验语法或代码的书写风格
Set up unit tests 设置单元测试
Set e2e tests with Nightwatch 是否安装端到端自动化测试框架Nightwatch
最后一个选择npm,然后项目就开始初始化下载依赖

在这里插入图片描述

2.4 项目初始化完成

在这里插入图片描述

四、启动项目

找到项目所在目录,将项目拖到vscode中,点击菜单栏的终端,新建终端
执行npm run dev启动项目
发布了42 篇原创文章 · 获赞 29 · 访问量 3865

猜你喜欢

转载自blog.csdn.net/weixin_43279985/article/details/104666430