vue 开发环境搭建

1.创建vue项目

1.node js 生成项目,编译项目

2.hbuilder 开发环境

1.下载安装node js

http://nodejs.cn/download/

 

确认是否安装成功

 

如果安装不了 代码错误2503

解决方法:

管理员命令运行cmd;

cd\

cd C:\Users\Administrator\Desktop

msiexec/package node-v6.3.1-x64.msi

(msi是版本号)

2.安装 VUE CLI 

vue cli 是一个脚手架工具,用于生成一个基础的vue应用。

npm install vue-cli -g

3.新建一个Vue项目

cd 目录(你要把项目放在哪个目录)

  • vue init webpack pname(你的项目名字)
  • ? Project description (A Vue.js project) vue-cli新建项目(项目描述)
  • ? Author (xhdx <zhuming3834@sina.com>) ;zhuming3834@sina.com(项目作者)
  • ? Vue build
    ❯ Runtime + Compiler: recommended for most users
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
    这里选择Runtime + Compiler: recommended for most users;

  • ? Install vue-router? (Y/n) y 是否使用vue-router,这里根据需求选择;

  • ? Use ESLint to lint your code? (Y/n) y 是否使用ESLint,这里根据需求选择;

  • ? Pick an ESLint preset (Use arrow keys)
    ❯ Standard (https://github.com/feross/standard)
    Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard)

  • ? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试,这里根据需求选择;

  • Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试,这里根据需求选择;

  • cd pname(项目目录);

  • npm install 安装依赖

  • npm run dev 本地运行项目

 

 

 

 

 

 

 

 

 

 

 

 

 

默认浏览器会自动打开http://localhost:8080/#/,出现如下页面: 
这里写图片描述
一共13步,一个vue-cli新建的模板项目就运行起来了。

转载于:https://www.cnblogs.com/yubaibai/p/10457290.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/278252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iphone视图放大_如何将iPhone用作放大镜

iphone视图放大It’s a common problem: Some things are just too hard to see. Usually, they’re too far away, too dark, or too small. With a feature called Magnifier, your iPhone can function as a magnifying glass and sight aid. Here’s how to use it. 这是一…

discord linux_如何在Discord中应用文本格式

discord linuxDiscord allows for text-and audio-based chatting between gamers and other like-minded individuals. If you want to make a bigger impact on Discord, you can use formatting to jazz up your text-based messages. Here’s how. Discord允许游戏玩家和其…

一张图看懂阿里云网络产品[十二]云企业网

2019独角兽企业重金招聘Python工程师标准>>> 摘要&#xff1a; 阿里云致力于为用户提供优质、高效、稳定的网络传输环境&#xff0c;云企业网&#xff08;Cloud Enterprise Network&#xff09;将提供一种能够快速构建混合云和分布式业务系统的全球网络&#xff0c;…

# 2019-2020.3 《java程序设计》第一周学习总结

2019-2020-3 《Java 程序设计》第一周学习总结 在本周的学习中&#xff0c;学习到了好多也收获了好多&#xff0c;从最基础的安装虚拟机开始&#xff0c;根据老师的博客中的教程一步一步的进行&#xff0c;在这过程中也遇到了好多问题&#xff0c;因为是初步接触Linux系统&…

如何在Windows 10上跳过回收站以删除文件

Windows 10 normally sends files you delete to the Recycle Bin. They’ll be kept until you empty it—or, in some cases, until Windows 10 automatically empties your Recycle Bin. Here’s how to skip the Recycle Bin and delete files immediately. Windows 10通常…

OSChina 周日乱弹 —— 我叫张一条

2019独角兽企业重金招聘Python工程师标准>>> Osc乱弹歌单&#xff08;2018&#xff09;请戳&#xff08;这里&#xff09; 【今日歌曲】 莱布妮子 &#xff1a;分享Lube的单曲《Skoro dembel》 《Skoro dembel》- Lube 手机党少年们想听歌&#xff0c;请使劲儿戳&am…

面向对象初识

一. 面向对象初识 1.1 回顾面向过程编程vs函数式编程 # 面向过程编程 测量对象的元素个个数。 s1 fjdsklafsjda count 0 for i in s1:count 1l1 [1,2,3,4] count 0 for i in l1:count 1 面向过程编程def func(s):count 0for i in s:count 1return count …

使用LiveClick升级您的实时书签

If you like to subscribe to feeds using Firefox’s Live Bookmarks feature, the LiveClick extension gives you so many upgrades that I can only cover the highlights of how great it is. 如果您想使用Firefox的“实时书签”功能订阅供稿&#xff0c;则LiveClick扩展程…

操作系统的概论梳理

转载于:https://www.cnblogs.com/hclhechunlu/p/10477470.html

win7下如何显示缅文和使用缅文输入法?

windows 7 操作系统默认不支持缅文&#xff0c;所以缅文在win7上不能显示&#xff0c;当然也没有提供缅文输入法。 一、显示缅文 windows系统下显示缅文字母只需要安装缅文字体就可以了。目前常见的缅文字体就是Zawgyi-One&#xff0c;Zawgyi-One是一种广泛使用的缅文字体。Zaw…

airpods2使用_如何使用AirPods和AirPods Pro:完整指南

airpods2使用Burdun Iliya/ShutterstockBurdun Iliya /快门Just bought yourself or received a new pair of AirPods or AirPods Pro? Welcome to the truly wireless earphones life. Setting up AirPods is quite straightforward, but here’s how to customize and get t…

如何在iPhone上共享视频之前从视频中删除音频

Sometimes, you’d like to share a video with others, but the accompanying audio track is distracting or perhaps introduces privacy concerns. Luckily, there’s a quick way to silence a video using Photos on iPhone and iPad. Here’s how. 有时&#xff0c;您想…

Java 并发工具箱之concurrent包

概述 java.util.concurrent 包是专为 Java并发编程而设计的包。包下的所有类可以分为如下几大类&#xff1a; locks部分&#xff1a;显式锁(互斥锁和速写锁)相关&#xff1b;atomic部分&#xff1a;原子变量类相关&#xff0c;是构建非阻塞算法的基础&#xff1b;executor部分&…

如何提高gps精度_如何在锻炼应用程序中提高GPS跟踪精度

如何提高gps精度l i g h t p o e t/Shutterstocklightpoet /快门Tracking your runs, bike rides, and other workouts is fun because you can see how much you’re improving (or, in my case, dismally failing to improve). For it to be effective, though, you have to …

centos proftp_在CentOS上禁用ProFTP

centos proftpI realize this is probably only relevant to about 3 of the readers, but I’m posting this so I don’t forget how to do it myself! In my efforts to ban the completely insecure FTP protocol from my life entirely, I’ve decided to disable the FTP…

Java通过Executors提供四种线程池

http://cuisuqiang.iteye.com/blog/2019372 Java通过Executors提供四种线程池&#xff0c;分别为&#xff1a;newCachedThreadPool创建一个可缓存线程池&#xff0c;如果线程池长度超过处理需要&#xff0c;可灵活回收空闲线程&#xff0c;若无可回收&#xff0c;则新建线程。n…

MySQL数据库基础(五)——SQL查询

MySQL数据库基础&#xff08;五&#xff09;——SQL查询 一、单表查询 1、查询所有字段 在SELECT语句中使用星号“”通配符查询所有字段在SELECT语句中指定所有字段select from TStudent; 2、查询指定字段 查询多个字段select Sname,sex,email from TStudent; 3、查询指定记录…

基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能

NextQRCode ZXing开源库的精简版 **基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能原文博客 附源码下载地址** 与原ZXingMini项目对比 NextQRCode做了重大架构修改&#xff0c;原ZXingMini项目与当前NextQRCode不兼容 dependencies {compile com.gith…

如何在Windows 7或Vista上安装IIS

If you are a developer using ASP.NET, one of the first things you’ll want to install on Windows 7 or Vista is IIS (internet information server). Keep in mind that your version of Windows may not come with IIS. I’m using Windows 7 Ultimate edition. 如果您…

ThinkPHP3.2 实现阿里云OSS上传文件

为什么80%的码农都做不了架构师&#xff1f;>>> 0、配置文件Config&#xff0c;加入OSS配置选项&#xff0c;设置php.ini最大上传大小&#xff08;自行解决&#xff0c;这里不做演示&#xff09; OSS > array(ACCESS_KEY_ID > **************, //从OSS获得的…