文档章节

vue cli安装步骤

tianyawhl
 tianyawhl
发布于 2017/09/12 10:42
字数 373
阅读 7
收藏 0
点赞 0
评论 0

1、全局安装 vue-cli
     npm install --global vue-cli
2、创建一个基于 webpack 模板的新项目
     vue init webpack my-project
3、切换到项目文件夹安装依赖
      $ cd my-project
      $ npm install
     但是在进行到$ npm install时 总是错误Failed at the phantomjs-prebuilt@2.1.15 install script 'node install.js
    这时需先安装phantomjs-prebuilt
    npm install phantomjs-prebuilt@2.1.15 --ignore-scripts
    再npm install
4、npm run dev

5、生成dist文件夹,npm run build

把生成的dist文件夹的内容上传到http服务器上就可以通过 http来访问了

.vue文件高亮显示

默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的。若要想高亮显示,需要安装插件 Vue Syntax Hightlight。安装步骤如下: 
第一,在 sublime 中打开 PackageControl 快捷键 Ctrl+Shift+P,或者在菜单Tools->Command Palette
第二,打开 Install Package 窗口,回车。 
第三,输入vue找到相应的插件,回车安装 

.vue文件格式化

 点击Install Package,然后搜索HTML-CSS-JS Prettify,按确定,等待安装结束。

安装HTML/CSS/JS Prettify后 : 
tools->HTML/CSS/JS Prettify->Pligin Options-Default 
在”allowed_file_extensions”: [“htm”, “html”, “xhtml”, “shtml”, “xml”, “svg”,”vue”] 加上vue就好了
 

如果从github下载别人的例子,前面的安装都很顺利,最后一步npm run dev出现莫名奇妙的错误(如显示{}异常)可以把node重新安装新的版本,我之前一直显示错误,之前的版本是5点几的版本,重新安装了6.1的版本就好了。

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 1
博文 192
码字总数 88621
作品 0
常州
前端工程师
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225 ⋅ 05/22 ⋅ 0

使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七 ⋅ 05/09 ⋅ 0

vue如何新建一个项目(超详细哦)

vue创建项目(npm安装→初始化项目→发布) 第一步npm安装 首先:先从nodejs.org中下载nodejs 双击安装,在安装界面一直Next 直到Finish完成安装。 打开控制命令行程序(CMD),检查是否正常 ...

程序员是粉色的 ⋅ 05/27 ⋅ 0

Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will ⋅ 04/05 ⋅ 0

vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888 ⋅ 05/22 ⋅ 0

vue路由组件左右切换(兼听手机返回键或自写按钮)

1 安装vue-cli (1) 下载安装node.js (1) npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 (1) cnpm install -g vue-cli 全局安装vue-cli 已安装则不用 (1) vu......

任倩坤 ⋅ 05/18 ⋅ 0

十分钟上手-搭建vue开发环境(新手教程)

想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记...

祈澈姑娘 ⋅ 05/28 ⋅ 0

webpack+vue+vueRouter模块化构建完整项目实例超详细步骤(附截图、代码、入门篇)

开始(确认已经安装node环境和npm包管理工具) 1、新建项目文件名为vuedemo 2、 初始化项目 >安装项目依赖 3、 默认安装最新版vue 4、 安装webpack,webpack-dev-server(是一个小型的Node....

元谷 ⋅ 05/01 ⋅ 0

vue升级之路(一)-- 使用vue-cli构建vue项目

最近在公司用vue.js做了个移动端OA项目,有点感觉vue2.0的运用感觉有点不足,所以准备用这次项目的累积及之前的一些理解,写一个vue系列的博客,巩固一下自己对vue的使用,也希望对大家有所帮...

tree_book ⋅ 06/04 ⋅ 0

vuex实现路由切换动画同时嵌套路由同样使用

示例 http://47.94.90.89/dist/#/aaa 一、安装vue-cli 1 下载安装node.js 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 3 cnpm install -g vue-cli 全局安装vue......

任倩坤 ⋅ 05/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

1.01-StringUtils的使用

import org.apache.commons.lang.StringUtils; 一、StringUtils 常用的方法: 1. 判断某一字符串是否为空 , 为空的标准是 str==null 或 str.length()==0 StringUtils.isEmpty(null) ==>tr......

静以修身2025 ⋅ 10分钟前 ⋅ 0

几道Spring 面试题

1、BeanFactory 接口和 ApplicationContext 接口有什么区别? ApplicationContext 接口继承BeanFactory接口 Spring核心工厂是BeanFactory BeanFactory采取延迟加载,第一次getBean时才会初始...

职业搬砖20年 ⋅ 11分钟前 ⋅ 0

包饺子

http://storage.slide.news.sina.com.cn/slidenews/77_ori/2018_24/74766_826131_625489.gif

霜叶情 ⋅ 13分钟前 ⋅ 0

兑吧:从自建HBase迁移到阿里云HBase实战经验

摘要: 业务介绍 兑吧集团包含兑吧网络和推啊网络,兑吧网络是一家致力于帮助互联网企业提升运营效率的用户运营服务平台,提供积分商城和媒体运营服务。推啊网络是一家互动式广告平台,经过多...

猫耳m ⋅ 23分钟前 ⋅ 0

xml解析

方法一: String s_xml1 = "<xml>" + "<head>lalalalal</head>" + "<body>1234</body>" + "</xml>"; try { DocumentBuilderFactory documentBuilderFactory......

GithubXD ⋅ 25分钟前 ⋅ 0

reuse stream

Although Java streams were designed to be operated only once, programmers still ask how to reuse a stream. From a simple web search, we can find many posts with this same issue ......

idoz ⋅ 25分钟前 ⋅ 0

兑吧:从自建HBase迁移到阿里云HBase实战经验

摘要: 业务介绍 兑吧集团包含兑吧网络和推啊网络,兑吧网络是一家致力于帮助互联网企业提升运营效率的用户运营服务平台,提供积分商城和媒体运营服务。推啊网络是一家互动式广告平台,经过多...

阿里云云栖社区 ⋅ 27分钟前 ⋅ 0

从世界杯看国内运动体育社交新能量

2018年世界杯已正式拉开帷幕,一场全世界球迷的狂欢也正式开始。 世界杯影响力:30亿+球迷的狂欢+社交话题 世界杯这个超级IP和对社交网络的引爆让更多的人目光聚焦到国内运动体育社交这个层...

ThinkSNS账号 ⋅ 27分钟前 ⋅ 0

不固定值替换

<?php$arr = 20;$data = str_replace(array(10,20,30,40),array("blue","red","green","yellow"),$arr);print_r($data);...

nsns ⋅ 29分钟前 ⋅ 0

Job for nginx.service failed 错误解决方案

今天刚在centos7上安装了nginx-1.2.11,/etc/init.d/nginx start启动时,出现 Job for nginx.service failed because the control process exited with error code. See "systemctl status n......

河图再现 ⋅ 30分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部