Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

  Vue 只关注视图层, 采用自底向上增量开发的设计。

  Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

  Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。

  Vue当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

vue安装

1 独立版本  之间下载vue.js <script》标签引入

2 NPM:在用vue构建大型项目应用时推荐使用NPM.

前提是安装了node npm webpack vue

查看node  node -v

表明 node安装成功

查看 npm npm -v

表明 npm安装成功

升级npm          npm install npm -g

使用npm安装模块,因为国外的网络不稳定,会很慢,所以建议是用淘宝的镜像,安装cnpm

查看cnpm cnpm -v

cnpm 安装成功

查看vue 版本

vue -V(V是大写的)

安装vue

cnpm install vue

vue-cli是vue提供的一个官方命令行工具,可用于快速搭建大型单页应用

全局安装 vue-cli

cnpm install --global vue-cli

下面按照正常的步骤新建项目:

vue init webpack my-project//新建基于webpack的项目 my-first-vue-demo,如下:

这是在目录下生成项目 my-first-vue-demo项目

执行下面的命令,进入 my-first-vue-demo中

安装项目依赖

安装完之后,运行项目

报错:

默认是8080端口,改端口被占用,打开项目,进入 config>index.js中

修改端口号,再次运行 npm run dev 运行项目

运行成功,打开页面:

有的会报错,如下:

这个是因为版本的问题,我之前就遇到了,搞了半天才明白,哎

查看自己的node npm 版本是不是太低了,更新到新版本,应该就没问题了。

window更新node的版本,需要重新安装node,在node的官网上下载最新版本的node,安装第一次安装的步骤进行安装,重新新建项目,按照以上的步骤,应该就没有问题了

使用vue-cli启动项目出错的更多相关文章

  1. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  2. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

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

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

  4. Vue -cli 入门 --项目搭建(一)

    一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. npm install含义 及vue安装启动项目时报错解决及vue建项目时各文件间的依赖关系

    全局安装vue-cli,使用命令npm install -g vue-cli. 下载模板代码,使用命令vue init webpack my-project,之后会有一些询问,按需填写即可. 最后会看 ...

  7. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  8. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  9. vue cli搭建项目

    1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...

随机推荐

  1. Python之trutle库-五角星

    Python之trutle库-五角星 #!/usr/bin/env python # coding: utf-8 # Python turtle库官方文档:https://docs.python.or ...

  2. Java中的日期、时间操作

    每次在处理日期时间的时候都要打开chrome查找一番,索性自己找一下满意的记录下来. 一.时间格式 // hh表示12小时制: HH表示24小时制 SimpleDateFormat format1 = ...

  3. maven运行出现错误:Caused by: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].StandardContext[]](xjl456852原创)

    maven在使用tomcat插件tomcat7-maven-plugin:2.2:run运行项目,出现下面错误: 严重: A child container failed during start j ...

  4. 笔记——python风格规范

    分号 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 每行不超过80个字符 例外: 长的导入模块语句 注释里的URL 不要使用反斜杠连接行. Python会将 圆括号, 中括号和花括号 ...

  5. 【Codeforces 444A】DZY Loves Physics

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 两个点的子图他们的"密度"是比所有联通生成子图都要大的 "只要胆子大,遇到什么问题都不怕!" [代码] ...

  6. Android BottomSheet:底部弹出Fragment面板(4)

     Android BottomSheet:底部弹出Fragment面板(4) BottomSheet不仅可以弹出轻量级的定制好的面板(见附录文章5,6,7),还可以弹出"重"的 ...

  7. 【ZJOI2017 Round1练习&BZOJ4774】D3T2 road(斯坦纳树,状压DP)

    题意: 对于边带权的无向图 G = (V, E),请选择一些边, 使得1<=i<=d,i号节点和 n − i + 1 号节点可以通过选中的边连通, 最小化选中的所有边的权值和. d< ...

  8. Eclipse-Java代码规范和质量检查插件-PMD

    PMD是一个源代码分析器. 它发现常见的编程缺陷,如未使用的变量.空catch块.不必要的对象创建等等. 它支持Java.JavaScript.Salesforce.com Apex.PLSQL.Ap ...

  9. mvnw是什么(Maven Wrapper/Maven保持构建工具版本一直的工具)

    背景 Maven是一款非常流行的Java项目构建软件,它集项目的依赖管理.测试用例运行.打包.构件管理于一身,是我们工作的好帮手,maven飞速发展,它的发行版本也越来越多,如果我们的项目是基于Mav ...

  10. Hive之执行计划分析(explain)

    Hive是通过把sql转换成对应mapreduce程序,然后提交到Hadoop上执行,查看具体的执行计划可以通过执行explain sql知晓 一条sql会被转化成由多个阶段组成的步骤,每个步骤有执行 ...