VUE脚手架具体使用方法

什么是vue脚手架？

他是一个快速构建 vue 项目的工具，通过他，我们可以将 vue 所需要的文件安装完成。

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，

相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

安装 vue-cli 脚手架

安装脚手架需要用 cnpm( 淘宝镜像 ) 安装 , 直接用 pip 安装 会失败 , 安装 cnpm 命令如下 :

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装成功输入 :cnpm-V, 查看 cnpm 是否安装成功 ,

注意 V 一定要是大写 .

安装 vue 脚手架命令去下 :

cnpm install -g vue-cli 安装成功是下面这样的

然后使用 vue-V 查看是否安装成功.

如果安装失败可能是 cnpm 版本过低 , 更新 cnpm 的版本即可 .

cnpm 更新必须要手动更新,更新命令如下:

npm install -g npm

使用 vue init webpack myitem    这条命令，就可以创建一个 vue

的脚手架。

解释一下命令 :

vue init 即使用vue-cli初始化一个项目。

webpack 是说使用webpack作为构建工具。

firstvue 是项目名称。 注意： 项目名称推荐使用小写字母。

安装时会暂停一下 , 你点击 Enter 进行下一步就可以了 ,

Install vue-router?  是否安装 vue 的路由 ? 如果你要做前后端的项目的话 , 就要选择 yes, 建议选择 yes.

Pick an unit tester jest  是否单元测试

其他的更具自己的需求进行选择

安装成功会显示出这两个命令 :

这个时候进入你新建的 vue 项目的目录下 , 你会发现他新建了一个 mytime 的文件夹

在运行项目前 , 需要安装依赖 , 命令如下:

cnpm install

Vue 需要在黑窗口启动一下 .

启动之前进入 vue 的项目根目录下 . 输入命令 :

cd mytime  进入根目录

npm run dev  启动项目

启动成功效果如下 :

复制路由 : http://localhost:8081 , 在谷歌浏览器打开 , 会显示页面 :

这个时候 , 一个完整的 vue 脚手架成功搭建成功 .

把你新建的 vue 项目拖拽到你的编程软件的根目录下 :

会出现这些文件 , 这个时候 , 你就可以进行编辑了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js的vue-cli脚手架中使用百度地图API的实例

    vue.js的vue-cli脚手架中使用百度地图API的实例

    第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用) 2.密钥申请成功后 第二步,在项目的需要模板中引入,具体如下: 项目路径 其中index.html存放地图链接,代码如下 在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看 选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

  • Vue脚手架的简单使用实例

    提前申明 注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方 webpack 一种项目构建工具,可以将css和js压缩成一个文件.此外,可以提供测试用服务器.使用webpack时,可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用 导入和导出 使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字.如果使用export default命令导出

  • 使用vue-cli（vue脚手架）快速搭建项目的方法

    使用vue-cli（vue脚手架）快速搭建项目的方法

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • vue脚手架vue-cli的学习使用教程

    vue-cli的模板 vue-cli的脚手架项目模板有webpack-simple 和 webpack 两种的区别在于webpack-simple 没有包括Eslint 检查等功能 vue-cli的项目结构 . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.

  • vue脚手架及vue-router基本使用

    首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具,对于刚接触的新手们建议关闭,不然代码写的不符合它的规范你的编译器会一直报错,如下图 安装好脚手架之后就像这样 终端输入npm run dev,然后打开localhost:8080就可以看到项目运行啦 大致分析一下几个比较常用的文件把,如下图 1.bu

  • 手把手教你使用vue-cli脚手架(图文解析)

    手把手教你使用vue-cli脚手架(图文解析)

    写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的教程,每一步尽量详细解析.需要的朋友可以过来参考下. vue-cli脚手架的优势: 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目. vue-cli是官方支持的一个脚手架,会随本版本进行迭代更新. vue-cli提供了一套本地的nod

  • 使用vue脚手架（vue-cli）搭建一个项目详解

    1.首先得下载node.js.方法可自行百度. 2. 3.一开始报很多错误,后来用管理员就没问题了. 4. 5.如上图会遇到卡住的问题,解决方法是 在最后一个选项上选择No,I will handle it myselft,然后cd vue_test,然后cnpm install,这样就成功了,然后执行npm run dev就出现: 6.浏览器端访问localhost:8081 7.项目目录 8.图片来源于网络 以上所述是小编给大家介绍的vue脚手架(vue-cli)搭建项目详解整合,希望对大家

  • VUE脚手架具体使用方法

    什么是vue脚手架? 他是一个快速构建 vue 项目的工具,通过他,我们可以将 vue 所需要的文件安装完成. vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持, 相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK. 安装 vue-cli 脚手架 安装脚手架需要用 cnpm( 淘宝镜像 ) 安装 , 直接用 pip 安装 会失败 , 安装 cnpm 命令如下 : npm install cnpm -g --r

  • vue脚手架中配置Sass的方法

    世界上最成熟.最稳定.最强大的专业级CSS扩展语言! 兼容CSS Sass完全兼容所有版本的CSS.我们对此严格把控,所以你可以无缝地使用任何可用的CSS库. 特性丰富 Sass拥有比其他任何CSS扩展语言更多的功能和特性.Sass核心团队不懈努力,一直使其保持领先地位. 成熟 Sass已经经过其核心团队超过8年的精心打造. 行业认可 一次又一次地,行业把Sass作为首选CSS扩展语言. 社区庞大 数家科技企业和成百上千名开发者为Sass提供支持. 框架 有无数的框架使用Sass构建.比如Com

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • jquery在vue脚手架中的使用方式示例

    本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do

  • vue跨域解决方法

    vue跨域解决方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报"No 'Access-Control-Allow-Origin' header is present on the requested resource." 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control

  • Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

    Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项

  • 一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）

    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api. 本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 二.目

  • 解决vue脚手架项目打包后路由视图不显示的问题

    脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind

随机推荐