1. 首先安装node.js,安装时一直点Next,知道Finish就可以安装成功

2. 打开控制命令执行程序cmd,输入node -v ,可以查看node的版本信息,即安装成功,我安装的是v8.12.0

3. 安装淘宝镜像安装相关依赖,我们都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像,

输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,接下来就可以用cnpm 命令来安装模块了

4. 安装vue-cli脚手架构建工具,输入命令npm install -g vue-cli ,安装完成即可。 //  全局安装vue-cli

5. 检查vue-cli是否安装成功,不能检查vue-cli,检查vue的版本信息,输入命令

6. 选定路径,新建vue项目,我是新建到D盘下,指令vue init  webpack +项目名称(项目名称都要小写哦)

如果项目创建的时候没有报错,cnpm install / npm install就可以省略,如果报错了,cd到项目里面运行该命令

(另一种创建项目方式:vue init webpack-simple demo01,这种方式创建出来的项目,目录比较简单,适合中小型项目)

7.  接下来就会新建这个项目,需要输入相关的配置,这个根据自己的情况而定

8. 项目创建成功,如图:

9. 进入到项目文件夹下

10. 输入npm run dev ,运行项目

11. 在浏览器中打开这个网址,就能看到

创建项目成功,自己创建的时候花了好长时间,会出现各种各样的错,最后执行cmd以管理员身份运行的才创建成功,记录一下第一个vue项目环境的搭建及创建

vue 新建项目的更多相关文章

  1. vue新建项目

    一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...

  2. vue新建项目之标准路由配置--父子嵌套界面

    配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) 父子界面嵌套---需要配置子路由 import Vue from 'vue' import ...

  3. vue新建项目之饿了么组件标准配置

    main.js import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import ...

  4. vue初尝试--新建项目

    这是一篇技术贴--如何新建一个基于vue的项目 1.下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了. 安装完成之后可以在cmd命令 ...

  5. Vue 实际项目中你可能会遇见的坑

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  6. vscode下面开发vue.js项目

    vscode下面开发vue.js项目   https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...

  7. vue开发项目详细教程(第一篇 搭建环境篇)

    最近做vue做项目碰到了不少坑,看了三天文档便开始上手做项目了,不是我牛b,是因为项目紧,我没有时间去深入学习,所以只能一边学一边做了. 我要做的项目是一个官方网站(包括管理后台),也因为是我第一次使 ...

  8. Vue小项目二手书商城:(二)axios前后端数据交互

    实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...

  9. redis数据库-VUE创建项目

    redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据 ...

随机推荐

  1. 使用contenteditable=true的div模拟textarea(vue2.0中使用,带placeholder且高度自动撑开)

    子组件: <template> <div class="item-address"> <span v-show="!hasAddress&q ...

  2. Win10优化:这8个操作简单的小方法让你的Win10系统更加流畅

    目前,市场上比较流行的主流电脑系统无非就是win7和win10这两个,这两个也是比较稳定的.但是自从微软发布将于2020年停止对win7支持后,很多小伙伴也表示无奈之下得升win10了啊. win10 ...

  3. Apache Spark 3.0 将内置支持 GPU 调度

    如今大数据和机器学习已经有了很大的结合,在机器学习里面,因为计算迭代的时间可能会很长,开发人员一般会选择使用 GPU.FPGA 或 TPU 来加速计算.在 Apache Hadoop 3.1 版本里面 ...

  4. PHP 轻量级 REST框架

    GITHUB:https://github.com/jacwright/RestServer 简介: 一个PHP REST服务器,用于提供非常轻量级的REST API.很容易上手.独立于其他库和框架. ...

  5. python 使用selenium模块实现自动搜索百度百科词条(模拟人工搜索)

    目标:模拟人工搜索百度百科词条,爬取相关信息,自动删除上一个关键词,输入新关键词,继续搜索,直到循环结束. 代码: from selenium import webdriver from seleni ...

  6. Spark Streaming的容错和数据无丢失机制

    spark是迭代式的内存计算框架,具有很好的高可用性.sparkStreaming作为其模块之一,常被用于进行实时的流式计算.实时的流式处理系统必须是7*24运行的,同时可以从各种各样的系统错误中恢复 ...

  7. SQL-58 获取有奖金的员工相关信息。

    题目描述 获取有奖金的员工相关信息.CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` date NOT NULL,`fi ...

  8. Java容器解析系列(9) PrioriyQueue详解

    PriorityQueue:优先级队列; 在介绍该类之前,我们需要先了解一种数据结构--堆,在有些书上也直接称之为优先队列: 堆(Heap)是是具有下列性质的完全二叉树:每个结点的值都 >= 其 ...

  9. 汉诺塔I

    题目描述 对于传统的汉诺塔游戏我们做一个拓展,我们有从大到小放置的n个圆盘,开始时所有圆盘都放在左边的柱子上,按照汉诺塔游戏的要求我们要把所有的圆盘都移到右边的柱子上,请实现一个函数打印最优移动轨迹. ...

  10. 常忽略的css技巧

    1.利用 CSS 的伪类中的content属性获取attr中的信息 效果图:鼠标放上去出现提示 css代码: .box{position:relative;display:inline-block;m ...