转载自:https://blog.csdn.net/sky_LQ/article/details/80729547

Vue脚手架使用步骤

2018年06月19日 12:10:35 sky_LQ 阅读数:3444
 

1、安装webpack

全局安装webpack命令行: npm install webpack -g

2、安装vue-cli脚手架构建工具

全局安装,输入命令行: npm install vue-cli -g

安装完成后执行命令:   vue -V 查看版本号,出现相应得版本即为安装成功

3、通过vue-cli,初始化vue项目

通过以上几步,将我们安装脚手架所需要的环境和工具都准备好好了,下面就可以使用vue-cli来初始化项目。

(3.1) : 新建一个mySelf(项目名)文件夹来放置项目,

在新建文件夹的上一级文件夹右键打开命令行工具,输入命令行:vue init webpack mySelf(项目名)

注:项目名不能大写,不能使用中文

解释一下这个命令,这个命令的意思是初始化一个vue项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中mySelf是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中。

(3.2) : 以下是脚手架安装过程(安装步骤解析在图片下面)

vue-cli初始化项目选项配置详细解析

(3.3)如何运行项目

  1. 进入你刚才创建在my-self项目的文件夹里面,我是在D盘里面创建的,我在D盘,需要进入自己创建的文件夹里面

2、安装项目依赖。命令行: npm install。前面在项目初始化的时候,已经存在了package.json文件,直接使用npm install 安装项目所需要的依赖,否则项目不能正确运行。

创建完成的“vuetext1”目录如下:

3、到这里,我们已经成功使用vue-cli初始化了一个vue项目。

启动项目:

在my-self目录运行命令行npm run dev或者npm start,启动服务,服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图。

注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用,当有其他vue项目运行的时候,可以使用ctrl+c来中断运行。

4、修改端口,可以在下图文件夹中修改

Vue脚手架使用步骤 2.9.6版本的更多相关文章

  1. Vue脚手架搭建步骤

    Vue脚手架的搭建步骤 1.   去node.js官网下载node.js并安装,如下图: 2.   找到下载的文件并点击安装: 一直到finish完成.安装成功 3.   通过DOS密令打开: 输入: ...

  2. vue脚手架安装步骤vue-cli

    1.环境搭建     安装node.js: 从node.js官网下载并安装node,安装过程很简单.  npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3 ...

  3. vue 脚手架搭建步骤!

    ========================================================== 说出来都是泪,最开始都不知道从哪里开始(回头一看还是很简单的,关键是要找到入口)  ...

  4. vue 脚手架 使用步骤

    当我知道搭建脚手架得使用命令行的时候.我就崩溃了.所以写一篇记录以后留着自己用也方便大家. 首先要安装一个node 环境, 1.打开cmd    进到你要建项目的目录: E:             ...

  5. vue-cli vue脚手架搭建步骤

    提前在E:\nodejs文件夹下建立node_gobal和node_cache 并配置环境变量NODE_PATH:E:\nodejs\node_global\node_modules 改变用户变量中的 ...

  6. 搭建vue项目的步骤

    新建vue脚手架 vue-element-cms步骤: 1. vue create ……………(文件名)---这里取为vue-element-cms 2. 命令行工具进入这个文件夹,安装路由依赖包 n ...

  7. Vue 脚手架学习

    首先就是安装脚手架 npm install @vue/cil -g 全局安装 在这里我遇到一个问题:安装不了脚手架,报错显示: 通过苦逼的查找原因就是 以前使用的taobao镜像 导致的,删除镜像换成 ...

  8. vue-cli 2.0搭建vue脚手架步骤

    1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...

  9. Vue脚手架最新版本安装使用

    现在很多的插件如Vant 这类的样式框架,都去兼容了Vue的3.0版本,所以我总结一下如何去简单的搭建一个Vue3.0的框架 开始 一,如何安装 在这里说明一下,Vue脚手架版本,和Vue版本是两个东 ...

随机推荐

  1. Win10 15063 开始运行不保存历史记录原因和解决方法

    http://www.ampc8.com/thread-23421-1-1.html 在Win10 1703的时候你也许会发现开始运行以后,再次打开就没有任何历史记录了,常规方法是桌面-右键-个性化- ...

  2. x-www-form-urlencoded与multipart/form-data区别

    转载声明: http://blog.chinaunix.net/uid-7210505-id-329700.html 在Flex中,UrlRequest中的contentType默认值为 applic ...

  3. [Java并发编程(三)] Java volatile 关键字介绍

    [Java并发编程(三)] Java volatile 关键字介绍 摘要 Java volatile 关键字是用来标记 Java 变量,并表示变量 "存储于主内存中" .更准确的说 ...

  4. ORACLE拼日期

    Oracle数据库拼字符串是用"||"连接的.在开发中,经常会用到时间范围的查询 例如  startTime >='2017-05-22 00:00:00' and endT ...

  5. Halcon中模板匹配方法的总结归纳

    基于组件的模板匹配: 应用场合:组件匹配是形状匹配的扩展,但不支持大小缩放匹配,一般用于多个对象(工件)定位的场合. 算法步骤: 1.获取组件模型里的初始控件 gen_initial_componen ...

  6. 【ML入门系列】(二)分类与回归

    前言 在机器学习中,“分类”和“回归”这两个词经常听说,但很多时候我们却混为一谈.本文主要从应用场景.训练算法等几个方面来叙述两者的区别. 本质区别 分类和回归的区别在于输出变量的类型.分类的输出是离 ...

  7. C#作为客户端调用gsoap生成的C++服务端

    近日在学习C++,偶然遇到网友想用C#调用gsoap生成的C++服务的问题,遂决定研究一下,网上搜索了很久,大多数是C++调用C#的应用.... 经过本人的不断努力,终于找到一种解决问题的方法,总结如 ...

  8. HashTab---Windows资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签

    HashTab 是一个优秀的 Windows 外壳扩展程序,它在 Windows 资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签.该标签可以帮助你方便地计算文件的 MD5.SHA1 与 C ...

  9. 腾讯云云机安装dockers

    云机的配置 首先更新一下源(更新前一直装不了) 下载dockers-ce(社区版) 启动dockers服务 使用hello-world进行测试(由于本地没有hello-world这个镜像,所以dock ...

  10. Win10, VS2017环境下OpenCV3.4.2的配置

    从官网https://opencv.org/releases.html下载OpenCV3.4.2的Win pack进行安装,安装目录便如下图所示: 要能在Visual Studio中使用上述安装的Op ...