第一步:需要安装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项目构建的更多相关文章

  1. vue项目构建与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...

  2. vue项目 构建 打包 发布 三部曲

    一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博 ...

  3. 一、Vue项目构建

    Attention:以下内容为Mac机上运行,windows可能有所偏差- Step1 打开终端,键入npm install -g vue-cli,使用vue-cli脚手架搭建vue项目能省很多事儿- ...

  4. vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除

    一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...

  5. vue项目构建:vue-cli+webpack常用配置

    1,Webpack-dev-server的proxy用法:https://www.jianshu.com/p/f489e7764cb8 2,vue-cli3搭建项目之webpack配置:https:/ ...

  6. vue项目构建过程

    # template 模版项目 > A Vue.js project* 构建过程* 安装过程* 差异点* 打包优化 ## 构建过程```bashbogon:vue-cli caoke$ vue ...

  7. Vue 项目构建

    一.初始化项目 1.vue init webpack (fileName) 2.项目名称 3.项目描述 4.项目作者 5.是否依赖 .Vue 文件开发 第一个选项可以不依赖 .Vue 文件开发, 第二 ...

  8. 通过调试vue-cli 构建代码学习vue项目构建运行过程

    我们知道vue-cli 3.0之前直接基于webpack创建对应配置文件,我们通过学习webpack就能够了解其构建过程,然而从vue-cli 3.0开始,vue-cli命令行更改为@vue/cli以 ...

  9. Vue项目构建开发笔记(vue-lic3.0构建的)

    1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...

随机推荐

  1. DMS是临时解决方案?

    DMS是临时解决方案? Who Says DMS Is an Interim Solution? 现在是认真对待DMS驱动程序监控系统的时候了. 特斯拉(Tesla)在台湾高速公路上撞上翻倒卡车的镜头 ...

  2. 『动善时』JMeter基础 — 40、JMeter中ForEach控制器详解

    目录 1.什么是逻辑控制器 2.ForEach控制器介绍 3.ForEach控制器的使用 (1)测试计划内包含的元件 (2)获取学院列表请求内容 (3)JSON提取器内容 (4)ForEach控制器内 ...

  3. 解决使用Git找不到.ssh文件夹的办法

    解决使用Git找不到.ssh文件夹的办法 首先生成git密钥 git config --global user.name "你的名字(最好是中文全名)" git config -- ...

  4. ES6中的字符串

    字符串在编程语言中,一直是使用率很高的数据,虽说函数在js语言中是一等公民,但是字符串,怎么也能算得上是千年老二,下面我就一起和大家探讨一下在es6中的一些新用法和特性,特别是在字符串拼接的时候,会解 ...

  5. NOIP模拟测试13「矩阵游戏·跳房子·优美序列」

    矩阵游戏 考试时思路一度和正解一样,考试到最后还是打了80分思路,结果80分打炸了只得了40分暴力分 题解 算出来第一列的总值,每次通过加每两列之间的差值得出下一列的总值 算第一列我们只需要让当前点* ...

  6. JAVA并行程序基础二

    JAVA并行程序基础二 线程组 当一个系统中,如果线程较多并且功能分配比较明确,可以将相同功能的线程放入同一个线程组里. activeCount()可获得活动线程的总数,由于线程是动态的只能获取一个估 ...

  7. sql数据库新建作业,新建步骤时报错从 IClassFactory 为 CLSID 为 {AA40D1D6-CAEF-4A56-B9BB-D0D3DC976BA2} 的 COM 组件创建实例失败,原因是出现以下错误: c001f011。 (Microsoft.SqlServer.ManagedDTS)

    简单粗暴的重启sql数据库 其他网上找的方法 32位操作系统: 打开运行(命令提示符), 一.输入 cd c:\windows\system32 进入到c:\windows\system32路径中 二 ...

  8. Unity StateMachineBehaviour

    在unity animator中单个Animator Clip中点击Add Behaviour增加当执行该动画时的一些状态代码,请看如下 创建完之后基本代码结构如下:(如果想修改默认代码结构,请看示例 ...

  9. 12、创建mysql用户及赋予用户权限

    1.通过help命令查看grant的用法: CREATE USER 'jeffrey'@'localhost' IDENTIFIED BY 'password'; GRANT ALL ON db1.* ...

  10. 【spring源码系列】之【Bean的属性赋值】

    每次进入源码的世界,就像完成一场奇妙的旅行! 1. 属性赋值概述 上一篇讲述了bean实例化中的创建实例过程,实例化后就需要对类中的属性进行依赖注入操作,本篇将重点分析属性赋值相关流程.其中属性赋值, ...