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

2024-04-09 18:16:33

最新图解利用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，该文件是项目展示的窗口文件。

转载于:https://www.cnblogs.com/zhoudaxiaa/p/8670678.html

图解利用vue-cli 脚手架创建项目相关推荐

猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
通过Vue CLI 4创建项目
1.安装Vue CLI 4 前提是你已经安装了Node(自带npm),Node版本要求:Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上). Vue CLI 的 ...
Vue CLI脚手架新建项目
Windows PowerShell 版权所有(C) Microsoft Corporation.保留所有权利.安装最新的 PowerShell,了解新功能和改进!https://aka.ms/PSW ...
前端如何通过vue/cli脚手架创建vue项目
vue脚手架创建项目
文章目录什么是脚手架(vue-cli) 通过脚手架创建项目脚手架的安装 3.x版本以上脚手架创建项目命令框创建项目使用 ui 界面创建项目 3.x 版本基于2.x的旧模板创建项目两个版本项目 ...
Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器
目录一.安装和创建项目二.项目结构三.开发和构建四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
[Vue]-Vue脚手架创建项目时的 linter / formatter config配置选择 ESLint with error prevention only 只进行报错提醒 ESLint + ...
Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...

最新文章

热门文章