图解 利用vue-cli 脚手架创建项目

简介: 最新图解 利用vue-cli 脚手架创建项目首先你的node环境是搭好的node -v一、安装vue-cli首先全局安装vue-cli,这里使用的是cnpm(淘宝镜像)没有就用npm,强烈建立更换淘宝镜像,npm很慢。

最新图解 利用vue-cli 脚手架创建项目

首先你的node环境是搭好的

node -v

这里写图片描述

一、安装vue-cli

首先全局安装vue-cli,这里使用的是cnpm(淘宝镜像)没有就用npm,强烈建立更换淘宝镜像,npm很慢。。

cnpm i -g vue-cli

这里写图片描述

使用 vue 检查是否成功
如下这样就是成功了
这里写图片描述

二:创建项目

在你想创建项目的文件夹里打开cmd
这里使用的是webpack模版

使用 vue list 看来支持的模板

这里写图片描述

使用 vue init webpack my-project(my-project为项目名)

然后就是根据提示操作就行。
对于初学者,我建议的是
vue-router 选择 n (vue的路由,根据你的需要选择)
ESLint 选择 n (代码检测工具,很严谨的,如果只是学习用的话,建议关闭)
unit tests 选择 n (单元测试工具,根据需要选择)
e2e tests 选择n (端到端测试,根据需要选择)
这里写图片描述

然后进入你创建的项目内

cd my-project   (进去项目文件夹)
cnpm i  (安装依赖,我用cnpm,没有就用npm)
如下就成功了

这里写图片描述

三、启动项目

npm run dev   (在8080端口启动项目)

一大串代码过后

这里写图片描述

最后在浏览器地址栏输入:127.0.0.1:8080
下图就表示成功了!
这里写图片描述

创建的项目目录如下
这里写图片描述

以上是Vue脚手架的基本的目录结构,我们一般编写代码都放在src目录下,这里有一个components文件夹,该目录放置自定义组件。src目录下有一个App.vue,该文件是项目展示的窗口文件。

相关文章
|
1月前
|
JavaScript
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
34 2
|
2月前
|
JavaScript
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装
|
6月前
|
JavaScript
vue基础教程安装创建项目
vue基础教程安装创建项目
33 0
|
JavaScript 数据可视化
[Vue]vue cli (脚手架)(项目的创建与分析)(二)
[Vue]vue cli (脚手架)(项目的创建与分析)(二)
|
JavaScript 程序员
使用vue-cli创建项目的步骤
一.什么是vue-cli (1)vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程 (2)引用自 vue-cli 官网上的一句话: 程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。 中文官网:https://cli.vuejs.org/zh/ 二.安装vue-cli (1)vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上: 随意打开一个cmd窗口,输入:npm install -g @vue/cli (2)输入vue -V即可验证是
368 0
使用vue-cli创建项目的步骤
|
存储 JavaScript 数据可视化
[Vue]vue cli (脚手架)(项目的创建与分析)(一)
[Vue]vue cli (脚手架)(项目的创建与分析)
|
JavaScript 前端开发 容器
[Vue]vue cli (脚手架)(项目的创建与分析)(三)
[Vue]vue cli (脚手架)(项目的创建与分析)(三)
|
Web App开发 JavaScript 前端开发
如何快速安装vue-cli脚手架
如何快速安装vue-cli脚手架
103 0
|
JavaScript
【Vue 开发实战】实战篇 # 27:使用Vue CLI 3快速创建项目
【Vue 开发实战】实战篇 # 27:使用Vue CLI 3快速创建项目
130 0
【Vue 开发实战】实战篇 # 27:使用Vue CLI 3快速创建项目
|
JavaScript 前端开发
从0到1带你搭建一个vue3.0项目(vue-cli脚手架版)
时代在发展,技术也在进步,这不咱们前端的主流框架vue也慢慢从vue2.0让尤雨溪大佬更新到vue3.0了,正好公司最近有个新的小项目让我负责,技术选型我来决定,经过团队讨论后一致决定使用vue3.0来作为开发技术栈,据说vue3.0有这些优点:性能比2.x快1.2~2倍;按需编译,体积比Vue2.x更小 ;数据监听方式变成了Proxy,消除Object.defineProperty现有的限制(例如无法检测新的属性添加),并提供更好的性能。话不多说,先快速搭建一个vue3.0版本的工程吧(这里先使用vue-cli脚手架来搭建,博主也还在学习中,后续再出一期vite开发构建工具对比)
552 0
从0到1带你搭建一个vue3.0项目(vue-cli脚手架版)