首先需要明确的是:Vue.js 不支持 IE8 及其以下 IE 版本,一般用与移动端,基础:开启最高权限的DOS命令(否则会出现意外的错误提示)
 
注意:个人小推荐如果我们不知道如何才能开启最高权限的DOS命令,个人安利一个软件DISM++,功能主要清楚系统垃圾什么的,在小工具里会有个春哥附体

 这样在弹出框里打cmd,唤出的命令提示符就是最高权限了,话不多说进入正题

1.安装node.js,检测版本node -v,还要检测包管理工具npm -v

这里需要说明下,因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。

2.  安装webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。

//全局安装
npm install -g webpack

3.  安装vue-cli脚手架构建工具

npm install vue-cli -g

安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功

在准备阶段

接下来我们就准备构建项目了,首先就是找个磁盘,自己新建一个文件用于放我们的项目

在命令行中   cd  找到我们的项目文件

vue init webpack 项目名字<项目名字不能用中文>

然后会显示

Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 直接回车默认
Use ESLint to lint your code? n
pick an eslint preset. 默认Standard
setup unit tests with karma + mocha?No(单元测试不需要)
setup e2e tests with Nightwatch?No(单元测试不需要)
cd 项目名字
安装项目依赖 :npm install
安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西,–save 是你发布之后还依赖的东西 :npm install vue-router vue-resource –save
启动项目 :npm run dev
 

到了这里,说明你的项目就可以正式运行了,打开浏览器输入上述的链接,项目搭建完毕,可以开发了

发布项目 
npm run build

搭建VUE项目的准备(利用vue-cli来构建项目)的更多相关文章

  1. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  2. 项目管理01--使用Maven构建项目(纯干货)

    目录 1. Maven基础知识 2. Maven实战.开发.测试.打包.部署一个Web项目 一.Maven基础知识 Maven坐标 Maven提供了一个中央仓库,里面包含了大量的开源软件的jar包,只 ...

  3. Jhipster 学习(一)jhipster构建项目

    如何安装jhipster 第一步:下载jdk  自己安装的1.8版本  (安装.环境变量配置略) 第二步:1.下载Eclipse (luna版 eclipse-4.4.1) 第三步:下载maven ( ...

  4. CMake 构建项目教程-简介

    CMake 构建项目教程-简介 Linux 平台构建项目,选择了CLion作为C++的IDE,而CLion默认就是使用CMake构建项目,所以这里记录了CMake在构建项目过程的一些小知识. 1. 项 ...

  5. vue.js2.0:如何搭建开发环境及构建项目

    1,安装node.js Node.js官网:https://nodejs.org/en/ 进入Node.js官网,选择下载并安装Node.js.安装过程只需要点击“下一步”即可, 如下图,非常简单. ...

  6. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  7. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  8. Vue框架(三)——Vue项目搭建和项目目录介绍、组件、路由

    Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...

  9. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

随机推荐

  1. python-虎扑爬虫

    Python作为一个高级编程语言,不知从何时起就在圈子里流行起来了.个人也是图个鲜,跟上时代步伐学习了一下."鲁迅"说过:不能学以致用,就是耍流氓.我用python对虎扑论坛作了一 ...

  2. Web前端学习(4):显示图片、url与文件路径

    本章主旨 介绍<img>标签及其基本属性:介绍URL和文件路径 在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1 ...

  3. python 爬取B站视频弹幕信息

    获取B站视频弹幕,相对来说很简单,需要用到的知识点有requests.re两个库.requests用来获得网页信息,re正则匹配获取你需要的信息,当然还有其他的方法,例如Xpath.进入你所观看的视频 ...

  4. linkin大话设计模式--适配器模式

    linkin大话设计模式--适配器模式 大家知道,在java中只允许单继承,但是在实际问题中往往都需要多继承,java引入了接口这一概念.(一个类可以实现多个接口) 由于接口中都是抽象方法,那么我们在 ...

  5. 一个滑动选中RecyclerView中Item的布局SlidingCheckLayout,手指滑过Item时多项选中。

    SlidingCheckLayout是一个滑动选中RecyclerView中Item的布局,手指滑过Item时多项选中. 作者:竹尘居士 github:https://github.com/homgw ...

  6. js执行函数报错Cannot set property 'value' of null怎么解决?

    js执行函数报错Cannot set property 'value' of null 的解决方案: 原因:dom还没有完全加载 第一步:所以js建议放在body下面执行, 第二步:window.on ...

  7. 微信开发获取media_id错误码汇总

    微信开发遇到的错误汇总: 1. 错误代码40001 "errcode": 40001,    "errmsg": "invalid credentia ...

  8. vmware虚拟机无法连接网络

    这是一个老生常谈的问题,而且网上有一套解决方法,最方便快捷的肯定属恢复虚拟网络了 说说我的情况 虚拟机VMware® Workstation 12 Pro centos6.8,克隆,192.168.2 ...

  9. ABP官方文档翻译 4.5 特征管理

    特征管理 介绍 关于IFeatureValueStore 特征类型 Boolean特征 Value特征 定义特征 基本特征属性 其他特征属性 特征层级 检查特征 使用RequiresFeature特性 ...

  10. 浏览器通过file://访问文件和通过http://访问文件有什么区别

    1.file协议用于访问本地计算机中的文件,就如同在Windows资源管理器中打开文件一样,注意它是针对本地(本机)的,简单来说,file协议是访问你本机的文件资源.http访问本地HTML,是在本地 ...