Vue环境搭建及第一个helloWorld
Vue环境搭建及第一个helloWorld
一、环境搭建
1、node.js环境安装配置 https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 https://www.jianshu.com/p/13f45e24b1de
2、安装vue(命令在命令行输入,快捷键win+r;输入cmd,之后输入下面的命令 )
cnpm install vue -g
3、安装vue命令行工具,即vue-cli脚手架
cnpm install vue-cli -g
二、新项目的创建
1、打开存放新建项目的文件夹(比如在D盘新建个vue文件)
快捷键 win + r;输入cmd,回车;打开你新建的文件夹;例:我在D:盘新建了一个空的vue文件夹,那么在命令行输入
2、输入“vue init webpack-simple 项目名称(使用英文)”。例:
就是vue init webpack-simple + 文件名;
初始化完成后的项目目录结构如下:

在后面的链接里,有详细的目录介绍,我就不再赘述https://blog.csdn.net/weixin_40905960/article/details/80375536
3、安装工程依赖模块
定位到test工程目录,安装工程依赖;依赖安装在test目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules。
cd test
cnpm install
4、运行项目(node启动的
cnpm run dev


最后出来下面这个界面:

三、创建第一个helloWolrd
可以把不要的删除了,例:

第一个hello World

Vue环境搭建及第一个helloWorld的更多相关文章
- scala 入门Eclipse环境搭建及第一个入门经典程序HelloWorld
scala 入门Eclipse环境搭建及第一个入门经典程序HelloWorld 学习了: http://blog.csdn.net/wangmuming/article/details/3407911 ...
- Cesium入门2 - Cesium环境搭建及第一个示例程序
Cesium入门2 - Cesium环境搭建及第一个示例程序 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 验 ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- Java基础教程1:环境配置及第一个HelloWorld.java
本文主要介绍JDK环境配置.Sublime Text3配置及第一个HelloWorld.Java程序.运行环境为Win10系统,使用JDK1.8版本. 1. JDK下载及环境配置 1.1 JDK下载 ...
- visual2017专业版MFC编程环境搭建及第一个MFC程序的创建
1.MFC介绍及环境搭建 MFC全程为Microsoft Foundation class Library,即微软的基本类库,MFC实际上是一个庞大的文件库,它由指向文件和源文件组成. 首先,打开vi ...
- 使用IDEA写Python之pytest环境搭建及第一个程序编写
一.准备篇 Python环境:3.8.3 开发工具:IDEA,对你没有看错 二.IDEA下安装开发环境 1. python的下载 https://www.python.org/downloads/ P ...
- SpringBoot环境搭建及第一个程序运行(详细!)
spring boot简介 spring boot框架抛弃了繁琐的xml配置过程,采用大量的默认配置简化我们的开发过程. 所以采用Spring boot可以非常容易和快速地创建基于Spring 框架的 ...
- FFmpeg 开发环境搭建及第一个程序 Hello FFmpeg 编写
1. FFmpeg 的安装 ./configure make make install 默认会将 FFmpeg 安装至 /usr/local 目录下(可通过 configure 使用 "-p ...
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
随机推荐
- FWT公式一览
总表 真值表 对应运算 FWT IFWT A=B=0 A≠B A=B=1 左项 右项 左项 右项 0 0 1 & L+R R L-R R 0 1 0 ^ L+R L-R (L+R)/2 (L- ...
- django-2-目录结构
django是MVC或者叫MTV框架
- c# 读取和写入excel数据
1. 读取 DataTable GetDataFromExcelByConn(bool hasTitle = false){ OpenFileDialog openFile = new Open ...
- Linux上用sublime编辑Python时候出现"SyntaxError: Non-ASCII character ‘\xe5′ in file"的问题
Reopen with Encoding UTF-8也没用,那只是在编辑界面里面显示出中文而已,编译的时候还是不能识别中文. 所以,还是按网上说的吧,在每一个有中文的文件第一行加上# -*- codi ...
- C#socket客户端自己输入消息发送到服务端通信实现通信
一,服务端代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...
- ORM:Chloe
ORM的一种:Chloe注意实体类模板特色:多表连接 利用chloe实现对各表的增删查改的管理,判断现有物料是否能够支持生产规模. 一开始报错: IQuery<ProductionPlans&g ...
- #Ubuntu16.0.4 LTS 安装RabbitMQ
1.ubuntu下安装配置rabbitmq-server服务器环境:ubuntu16.0.4(向下兼容14.0.4)软件版本:RabbitMQ 3.7.5 .Erlang 20.1.7参考文档:htt ...
- shell 中cut
和awk差不多的功能 上面的例子中,把 root:x:0:0:root:/root:/bin/bash 重定向到cut命令里,-d表示分隔符,这里使用冒号: 作为分隔符,-f 表示字段,选择了第1,和 ...
- 十二、结构模式之门面(Facade)模式
什么是门面模式 门面模式(也有翻译为外观模式)是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面进行.其为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子 ...
- Robot Framework使用技巧之内部变量
[转载] 1.变量的使用 变量可以在命令行中设置,个别变量设置使用--variable (-v)选项,变量文件的选择使用--variablefile (-V)选项. 通过命令行设置的变量是全局变量,对 ...