使用vue-cli生成vue项目的步骤

最新推荐文章于 2024-03-24 18:45:27 发布
最新推荐文章于 2024-03-24 18:45:27 发布
阅读量719 收藏
点赞数
分类专栏： 系统相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41562661/article/details/82785824
版权
本文详细介绍了在安装好vue-cli后，如何通过命令行生成vue项目框架。首先执行`vue init webpack yourprojectname`，若遇到`vue不是命令`的问题，检查Node.js和npm是否已安装，如需重装解决。成功后，在项目文件夹内运行`npm run dev`启动项目。配合前一篇博客，可完整搭建vue项目。
摘要由CSDN通过智能技术生成

在电脑上安装好了vue-cli之后,就是使用vue-cli生成vue项目框架了, 步骤如下:

1. vue init webpack yourprojectname 

    如果这个时候你的电脑中已经安装了node, 全局安装了vue-cli, 然后在执行上面这个语句的时候报:

    vue不是命令, 那么排查步骤如下

    node -v   查看nodejs有没有安装

    npm -v    查看npm有没有安装

    vue -V    这是个大写的V, 查看vue-cli有没有安装, 如果此时报vue不是命令, node和npm都有安装,那么可以把node卸载重装一   下.

    然后再重新打开cmd, 输入vue init webpack yourprojectname就可以了.如下所示

也就是说, 你想使用vue-cli来自动化搭建一个基于webpack'的vue项目

安装好了之后, 可以使用它的提示npm run dev来运行这个项目

注意一定要 cd 到你的这个项目文件夹中使用npm run dev, 不然会报错, 截图如下

 应该如下图操作

这样你就把这个项目正式的跑起来了. 

这篇博客可以算是使用vue-cli搭建项目的第二部分,

你可以结合我前面一篇博客, 算是第一部分https://blog.csdn.net/weixin_41562661/article/details/82774260

就可以将一个vue项目搭建起来了.

 

 

最低0.47元/天 解锁文章
一口吃成个胖子
关注
专栏目录
安装vue-cli&使用vue-cli搭建项目
qq_64001795的博客
09-26 5086
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
使用vue-cli来搭建vue项目,路由跳转，嵌套路由
qq_62797382的博客
07-21 438
N 新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法。5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件。：是否安装e2e测试 N。1.Project name：项目名，默认是输入时的那个名称spa1，直接回车。#安装所有项目需要的npm模块。运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块。必须先安装vue,vue-cli，webpack，node等一些必要的环境。
图文讲解用vue-cli脚手架创建vue项目步骤
10-17
本次小编给大家带来的是关于用vue-cli脚手架创建vue项目步骤讲解内容，有需要的朋友们可以学习下。
vue-cli生成vue项目
Lval的博客
01-17 497
全局安装 vue-cli 1.$ cnpm install –global vue-cli 如果已经安装过了就不用安装了，这里我前面的项目已经安装过了，所以直接从第二步开始 my-project为自定义项目名 2.$ vue init webpack my-project 需要注意的是项目的名称不能大写，不然会报错 项目初始化时会询问一些安装项，可以根据自己的需求选择 Pro...
vue-cli 快速生成工程化的 Vue 项目
Rziziの博客
09-03 295
vue-cli 快速生成工程化的 Vue 项目 vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。 中文官网：https://cli.vuejs.org/zh/ 安装和使用 vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上： npm install -g @vue/cli vue -V //检查是否成功安装 基于 vue-cli 快速生成工程化的 Vue
生成vue项目
weixin_30855761的博客
09-14 69
1.安装node.js npm 2.安装vue脚手架 npm install -g vue-cli 或者淘宝cnpm安装 cnpm install -g vue-cli 3.创建项目 cd到放置项目的文件夹 以便一会项目的存放 3.1创建方式1 vue init webpack vue-demo01 注意ESLint(编写规范检查，选择的话不规范，如多一个空格就报错)，所以不选 ...
创建vue项目
elbeelbe的博客
03-24 125
一、命令行窗口创建 1.打开命令行窗口，切换到要保存项目的目录，如下图: 2.使用下面命令创建项目 vue create 项目名 运行之后，稍等片刻，进行下面界面，使用空格进行选择 选好之后回车，如下图蓝色选项所示进行选择。其中最后一项保存预设为 mypreset5，这个名字自拟。下次再创建vue工程时，如果选项不变，可以直接选择mypreset5，而不用再选择一遍。 回车运行，成功会提示下图红框中的两个命令，执行这两个命令，启动serve： run serve后给出如下图
vue-cli中安装方法(图文详细步骤)
01-21
vue-cli 是vue.js的脚手架，用于快速自动生成vue.js+webpack的项目模板，这样大大降低了webpack的使用难度。下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装...
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
使用Vue CLI2创建项目，可以通过`vue-cli2 init webpack`来创建一个使用webpack模板的新项目；而使用Vue CLI3，可以使用`vue-cli3 create my-project`来创建项目，其中`my-project`是你想要的项目名称。 以上就是...
几种创建vue项目的方法
weixin_45362994的博客
07-27 9189
如果你还没有安装 VueCLI 请执行下面的命令进行安装或是升级: npm install --global @vue/cli 按住 shift 鼠标右键 打开PowerShell 方法一 :vue init webpack xxx 在命令中输入以下命令创建Vue项目: 输入 vue init webpack demo727 Project name (demo727) 项目名字 (确定则回车) Project description (A Vue.js project) 项...
Vue项目的创建
最新发布
hhy
03-24 2054
vue3项目的创建及项目文件的认识
vue-cli生成的项目目录结构
seimeii的博客
11-25 287
|-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- utils.js // 构建工具相关 | |-- vue-loader.conf.js // webpack
新建vue项目
JankoY的博客
02-14 126
首先必须要有npm，window下无法在线更新node.js版本，所以每次要更新版本需要重新安装node.js 1.新建一个文件夹用于存放项目 mkdir fileName 2.下载一个全局生成vue项目的脚手架 vue-cli 安转指令：npm install vue-cli -g 3.初始化一个项目 vue init webpack <项目名>。这里的eslint可选择为n，eslint是代码规范验证，如果选择y会经常报错，会比较烦。 4.进入项目，安装依赖包 npm install 5
创建一个Vue项目(完整步骤)
热门推荐
Li_Wen_Zhong的博客
11-17 2万+
一、安装Node环境 1.下载地址:https://nodejs.org/en/ 安装过程——详细步骤 二、搭建Vue环境 1、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org 即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 检查是否安装成功：输入 cnpm -v 2、全局安装vue-cli 输入：np
Vue（三）使用Vue-cli新建一个Vue项目
你佳哥
04-27 171
目录1 环境要求2 新建项目 1 环境要求 Node.js的安装：Node.js官方网站 安装国内源cnpm (npm是node的包管理工具)：npm install cnpm -g 安装vue-cli(vue-cli是官方提供的快速搭建vue项目的脚手架)：cnpm install vue-cli -g 2 新建项目 在文件夹项目目录下(假设工程目录为demo01)：vue init webpack demo01 Project name demo01 Project description dem
新建Vue项目工程
果vinegar的博客
08-10 295
新建Vue项目 安装Node https://nodejs.org/zh-cn/ 创建工程： 1、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 　　注：下面的npm可换成cnpm下载快 2、安装webpack：npm install webpack -g 3、安装vue脚手架：npm install vue-cli -g 4、配置环境变量 D:\nodejs\node_global\ ...
用vue-cli快速生成vue项目
hlqiong的博客
08-15 1806
一、全局安装webpack npm install webpack -g 二、安装node 三、全局安装vue-cli npm install vue-cli -g 四、生成项目  vue init webpack project_name 五、安装依赖模块  在项目文件夹内打开cmd npm install 六、开发环境运行 npm run dev 七、配置篇 ...
vue-cli4.0快速搭建项目教程
"使用vue-cli4.0快速搭建一个项目的方法步骤" 本文主要介绍了如何使用vue-cli4.0来快速搭建一个Vue.js项目，包括升级本地环境和创建新项目的步骤。作者首先提到了由于公司项目早期采用的是vue-cli2.0，随着版本更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值