如何使用Vue-cli搭建和运行vue项目
此文章 主要参考:https://jingyan.baidu.com/article/5225f26bbb430fe6fa0908ce.html
在vue init webpack my-project卡住的问题:在vue init webpack my-project卡住的问题
手把手教你用vue-cli搭建vue项目:https://www.cnblogs.com/liaoanran/p/8042893.html
https://blog.csdn.net/qq_37164847/article/details/80926242
以上的链接都是自己参考 仅供自己学习使用
node的安装和环境变量的配置参考:
https://www.cnblogs.com/jiangwenli/p/7338030.html
https://jingyan.baidu.com/album/48b37f8dd141b41a646488bc.html?picindex=19
第一步,肯定是安装node.js。根据需要下载安装,安装后如图,然后进行下一步
1.nodejs安装
下载地址:https://nodejs.org/en/download/
选择对应版本的下载。然后傻瓜式一步安装到底。比如我的安装后目录为
E:\Program Files\nodejs
然后用在cmd 下输入:node -v 查看是否安装成功。如果不行就检查一下环境变量中path有没有nodejs的安装路径。如果没有就手动添加。

二、查看npm版本
在cmd下输入命令:npm -v
如果低于3.0版本需要进行升级(一般nodejs自带的npm的版本都太低,我在第一次运行的时候就被告知版本太低无法运行)
升级方法:
在cmd命令下cd到nodejs安装目录,然后输入以下命令:npm update npm
这里要等待一下。更新完成后再使用:npm -v检查一下版本
三、cnpm的安装
安装cnpm,由于npm有些资源被屏蔽,儿有些是国外资源的原因, 会导致安装依赖的时候失败,这里安装cnpm国内镜像。cnpm是淘宝的一个镜像,安装之后可以使用cnpm安装命令工具,安装速度会加快。
直接使用npm install -g cnpm –registry=https://registry.npm.taobao.org
命令安装即可。
打开命令提示符(win+r),然后进行下一步;本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,
node -v 检查node是否安装成功
npm -v 检查npm是否安装成功
cnpm -v 是否安装成功
四、安装vue-cli
vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装命令为:cnpm install -g vue-cli,回车,等待安装。
安装完后,检查是否安装成功,输入vue -V



五、新建一个Vue项目
1、新建一个文件夹vueJs用于存放项目,比如我的路径为E:\vue-demos
2、cd到此文件夹,输入:vue init webpack vue-demo


在E盘的vue-demos就可以看到一个vue-demo

注意:我在这里遇到一个问题
在安装完node.js后,也用cnpm代替了npm,然后使用cnpm在node.js的安装路径下安装了vue-cli:cnpm install --global vue-cli。然后使用vue init webpack my-project建立一个项目
之前安装时在最后一个选项上选择了 npm install ,结果后面卡住了(当时没有去截图),强制退出后,执行npm run dev就报错了。
最终解决办法就是在最后一个选项上选择No,I can handle it myselft,然后cd my-project,然后cnpm install,这样就成功了,然后执行npm run dev就出现:
安装所需依赖,进入文件路径,然后执行命令 cnpm install ,等待安装。然后进行下一步:

如图,依赖完成后,新增node_modules文件夹。然后进入下一步

至此,项目已经建立,执行npm run dev 运行项目,等待结果:然后进入下一步

打开浏览器,输入localhost:8080,出现如下,表示启动成功,就可以进行其他开发了

启动项目
npm run dev
发布项目
npm run build
【vue】如何在 Vue-cli 创建的项目中引入 iView
参考:https://www.cnblogs.com/smilexumu/p/7813902.html
注意:npm 安装插件要在项目的根目录下
参考:https://www.cnblogs.com/ayseeing/p/3624058.html
elemtui的引入方式参考
https://blog.csdn.net/csdnear/article/details/79426915
后面学习发现这个作者写的比较详细 马住
https://www.jianshu.com/p/1626b8643676
如何使用Vue-cli搭建和运行vue项目的更多相关文章
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- 零基础 Vue 开发环境搭建 打开运行Vue项目
[相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- vue cli 3.0快速创建项目
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...
- ubuntu下安装vue/cli提示No command 'vue' found
通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...
随机推荐
- 通过脚本调用MSBuild编译项目时指定Configuration(解決方案配置)和Platform(解決方案平台),Rebuid(重新生成解决方案),Clean(清理解决方案)
为了方便打包测试,自己PowerShell写了一个编译和发布的脚本,调用msbuild通过命令行来编译当前解决方案 后来发现一个问题,用VS编译解决方案,我通过 项目属性-Build设置 Releas ...
- NLP第9章 NLP 中用到的机器学习算法——基于统计学(文本分类和文本聚类)
- python接口自动化测试(一)-环境准备
接口测试的方式有很多,比如可以用工具(jmeter,postman)之类,也可以自己写代码进行接口测试,工具的使用相对来说都比较简单,重点是要搞清楚项目接口的协议是什么,然后有针对性的进行选择,甚至当 ...
- SpringBoot2.0微信小程序支付多次回调问题
SpringBoot2.0微信小程序支付多次回调问题 WxJava - 微信开发 Java SDK(开发工具包); 支持包括微信支付.开放平台.公众号.企业微信/企业号.小程序等微信功能的后端开发. ...
- 解决Visual Studio调试突然变慢卡死的问题
最开始摸不到头脑,之前还能好好调试的啊.后来在VS的调试菜单的符号选项里面发现了系统环境变量_NT_SYMBOL_PATH 的值为:srv*c:\symbols*http://msdl.microso ...
- 一行代码搞定 R 语言模型输出!(使用 stargazer 包)
引言 使用stargazer包可以将 R 构建的模型结果以LATEX.HTML和ASCII格式输出,方便我们生成标准格式的表格.再结合rmarkdown,你就可以轻轻松松输出一篇优雅的文章啦~本文“使 ...
- 游戏行业DDoS攻击解决方案
行业综述 根据全球游戏和全球移动互联网行业第三方分析机构Newzoo的数据显示:2017年上半年,中国以275亿美元的游戏市场收入超过美国和日本,成为全球榜首. 游戏行业的快速发展.高额的攻击利润.日 ...
- 用.NET开发的磁力搜索引擎——btbook.net
UPDATE:目前项目已停止维护,本文仅留作纪念. 去年10月份开始研究相关的协议与资料,中途乱七八糟的事情差点没坚持下来,寒假里修修补补上礼拜把Btbook发布了,经过社交网络的推广之后,上线第三天 ...
- [svc]容器网络学习索引及网络监控
整理的可能有些误失,抽时间在细细的分类完善下. 发现这篇对于网络从低到高层协议整理的还不错 每层都有一些有意思的话题 一些协议有一些设计上的弱点, 所以产生了种种的网络层安全问题 一般我们学一些 1, ...
- SQL Server 2016新特性:列存储索引新特性
SQL Server 2016新特性:列存储索引新特性 行存储表可以有一个可更新的列存储索引,之前非聚集的列存储索引是只读的. 非聚集的列存储索引支持筛选条件. 在内存优化表中可以有一个列存储索引,可 ...