vue-cli起项目步骤

一、安装 node.js

安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

二、安装webpack

npm install webpack -g

安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。

三、安装 vue-cli

npm install -g vue-cli

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

　　1、在硬盘中找一个放项目的文件夹

　　2、在文件夹下打开命令盘，输入命令

　　Vue-Project是我们自己设置的项目名称，项目名称不能用中文

vue init webpack Vue-Project

　　3、进入项目工程目录

　　4、安装项目所需依赖 npm install

　　5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

npm install vue-router vue-resource --save

创建完成的项目目录，如下图

各个目录的作用

最后一步启动项目

npm run dev

启动成功，打开浏览器8080窗口，页面如图所示

参考网址： https://www.jianshu.com/p/1626b8643676

转载于:https://www.cnblogs.com/ssunshine/p/9454240.html

vue-cli起项目步骤相关推荐

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结官方升级英文文档,中文文档相对滞后. 简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概 ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...
vue cli 3项目打包到指定目录
平常我们使用vue-cli构建项目,直接执行npm run build打包到dist目录下,然后项目一般又部署在我们服务器的根目录下.这样正常的流程,但是需求是多样的,有时我们就会遇到需要把项目部署到 ...
Vue cli创建项目时键盘操作无效（箭头移动失效、交互提示符失效）
用 git bash 使用 vue create demo 创建新项目时,键盘方向键失效,无法选中对应的选项(交互提示符不工作),问题状态如下图所示.文中给出四种解决方案,供各位参考. 方案一使用电 ...
vue vue-cli创建项目步骤方法
1.全局安装vue-cli npm i -global vue-cli 2.创建项目 vue init webpack project // name 为项目名 3.cd到项目的目录下 cd ...
vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。...
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
Vue Cli 3项目使用融云IM实现聊天功能
介绍:前台使用vue+vant开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程 ...
vue脚手架创建项目步骤
环境 vue create yeb
vue cli element 项目结构
关于vite2.0和vue/cli建立项目的区别
https://www.bilibili.com/video/BV15K4y1T7Nj?p=1 建议看视频看文字看图的效率就不说了

vue-cli起项目步骤

vue-cli起项目步骤相关推荐

最新文章

热门文章