一:Vue项目构建
第一步:需要安装nodeJS的环境,直接去官网下载https://nodejs.org/en/,下载下来按照提示一步步的安装。(vue.js是一个Js 框架。在node里面通过Npm 安装,是为了方便进行模块化管理。)

安装完成后在cmd中输入:node –v,可检测安装的nodejs版本,如下图

第二步:基于nodejs,利用淘宝镜像安装相关依赖(我们这里使用国内的淘宝镜像)
在命令行中输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装

安装成功后可通过:cnpm –v检验,如下图

第三步:安装全局vue-li脚手架和 webpack
在命令行中输入:cnpm install -g vue-cli

安装完成后可通过vue –V(注意大写) 查看是否安装成功。

第四步:构建项目
下面我们来构建一个项目保存在E盘的vue文件夹中。
首先cd 到指定文件,通过命令vue init webpack 项目名 来构建项目

然后在相对应的选项上选择是或者不是

构建成功后我们就可以看到E盘目录vue文件中的deom项目目录了

第五步:运行项目
cd 到项目中,通过命令npm run dev 我们就可以通过http://localhost:8080(注意端口号是否被占用)把项目跑起来了.


一:Vue项目构建的更多相关文章
- vue项目构建与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...
- vue项目 构建 打包 发布 三部曲
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博 ...
- 一、Vue项目构建
Attention:以下内容为Mac机上运行,windows可能有所偏差- Step1 打开终端,键入npm install -g vue-cli,使用vue-cli脚手架搭建vue项目能省很多事儿- ...
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
- vue项目构建:vue-cli+webpack常用配置
1,Webpack-dev-server的proxy用法:https://www.jianshu.com/p/f489e7764cb8 2,vue-cli3搭建项目之webpack配置:https:/ ...
- vue项目构建过程
# template 模版项目 > A Vue.js project* 构建过程* 安装过程* 差异点* 打包优化 ## 构建过程```bashbogon:vue-cli caoke$ vue ...
- Vue 项目构建
一.初始化项目 1.vue init webpack (fileName) 2.项目名称 3.项目描述 4.项目作者 5.是否依赖 .Vue 文件开发 第一个选项可以不依赖 .Vue 文件开发, 第二 ...
- 通过调试vue-cli 构建代码学习vue项目构建运行过程
我们知道vue-cli 3.0之前直接基于webpack创建对应配置文件,我们通过学习webpack就能够了解其构建过程,然而从vue-cli 3.0开始,vue-cli命令行更改为@vue/cli以 ...
- Vue项目构建开发笔记(vue-lic3.0构建的)
1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...
随机推荐
- JDBCTemplate基本使用
用了jdbc连接池之后,我们会发现连接对象的复用性更高了,程序整体运行的性能也更高了.但是我们在做JDBC操作的时候还是比较麻烦,要定义sql,执行sql,设置参数,处理结果. 特别是当我们要做查询操 ...
- [论文阅读笔记] Adversarial Mutual Information Learning for Network Embedding
[论文阅读笔记] Adversarial Mutual Information Learning for Network Embedding 本文结构 解决问题 主要贡献 算法原理 实验结果 参考文献 ...
- APP测试的主要内容
一.功能性测试:依据需求相关的文档编写测试用例进行测试 二.兼容性测试 系统版本:Android,ios 分辨率 网络情况 可用工具:testin 三.安装,升级,卸载测试 首次安装,覆盖安装,卸载后 ...
- 七、Nginx反向代理
调度器调度后端服务器 : web高可用 负载均衡 解决web单点故障 部署后端服务器---配置Nginx服务器(定义集群.请求转发)---起服务.测试----配置集群池属性(权重.失败次数.失败 ...
- centos 7 能ping通但是telnet 22 不通解决方法
试过关闭Linux防火墙,打开sshd服务,修改ens33为enth0.发现不好使. 经过不断的努力我发现,windows系统里面的VMware Network Adapter VMnet8设置的ip ...
- Linux命令大全之帮助命令及压缩命令
man(manual):帮助命令 help用于解释shell内部命令 格式:help shell内部命令 ls 命令 --help man 命令 info 命令 .zip .gz .bz ...
- js中有对象的key怎么获取对应的值
一般人的思路是这样的 var obj = {"name1":"张三","name2":"李四"}; var key = ...
- 手把手教你IDEA连接码云(Gitee)
目录 前言 一.下载.安装git 1.打开git官网,选择你的操作系统 2.根据你的系统位数选择相应的版本下载 3.安装 4.配置全局的用户名.邮箱 5.在idea中配置git目录 二.配置Gitee ...
- 动态路由协议与RIP配置
一.动态路由的概述 二.RIP路由协议工作原理 三.水平分割 四.RIP路由协议v1与v2的区别 五.实验配置 一.动态路由的概述 1.定义 动态路由是指利用路由器上运行的动态路由协议定期和其他路由器 ...
- jenkins+nexus上传插件发布制品到nexus
nexus安装 nexus安装参考:https://www.cnblogs.com/afei654138148/p/14974124.html nexus配置 创建制品库 制品库URL:http:// ...