文档章节

vue cli安装步骤

tianyawhl
 tianyawhl
发布于 2017/09/12 10:42
字数 373
阅读 7
收藏 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
博文 200
码字总数 98515
作品 0
常州
前端工程师
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

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

阿K1225
05/22
0
0
使用vue-cli(vue脚手架)快速搭建项目

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

四小七
05/09
0
0
Vue命令行工具vue-cli

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可...

韦姣敏
06/23
0
0
vue如何新建一个项目(超详细哦)

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

程序员是粉色的
05/27
0
0
使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化
06/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部