vue安装(vue-cli脚手架安装)

安装方法1:<script> 标签引入

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。Vue 会被注册为一个全局变量。

vue.min.js的版本

开发版本:包含完整的警告和调试模式

生产版本:删除了警告,24.72kb min+gzip

重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。(开发环境不要用最小压缩版,不然就失去了错误提示和警告!)

安装方法2:使用 CDN 方法

unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览 npm 包资源。

也可以从 jsdelivr 或 cdnjs 获取,不过这两个服务版本更新可能略滞后。

安装方法3:vue-cli脚手架安装

在用 vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。

vue-cli脚手架概述:Vue提供的脚手架工具,脚手架就好比建筑的时候的架子,帮助工人完成工程,vue的脚手架能生成目录结构、本地开发调试、代码压缩部署、热加载、单元测试

使用vue-cli脚手架的优势:成熟的vue项目架构设计;本地服务器测试;集成打包上线

安装以及创建项目的流程图

安装步骤:

安装npm

查询npm的版本——npm -v

安装最新版本——npm i npm g

安装webpack

查看webpack版本——webpack -v

安装webpack(全局安装)——npm install webpack -g

安装vue.js

查看vue.js 的版本——vue -V   (注意后面的V是大写的,需要安装完cue-cli脚手架之后才能查看的到)

安装最新vue.js——npm install vue g

安装vue命令行工具(vue-cli脚手架)

vue-cli脚手架安装:npm install -g vue-cli

创建项目第一步:首先进入需要创建项目的目录里面

创建项目:

第一步:Project name: 项目的名称(项目名不能大写)

第二步:Project description:项目的描述

第三步:Author:项目的作者(会自动生成到package.json文件里)

第四步:Vue build:这里有两个选项,第一个选项是运行时编译,可以不基于.vue开发,第二个选项是基于.vue开发比第一个小6kb

第五步:install vue-router:是否安装路由中间件

第六步:是否需要ES6代码风格检查器 选择YSE之后,有三个选项,第一个标准的(选择标准的直接回车即可)

第七步:是否需要测试相关

第八步:也是测试相关

安装package.json中的插件

也就是项目中需要的中间件,进入项目文件夹里,然后输入命令

npm install

安装完之后在项目文件夹中多了一个文件夹叫node_modules的目录

启动运行项目

启动之前先进入项目目录下,在命令行输入npm run dev  然后回车,在浏览器中输入http://localhost:8080

出现下面这个页面表示vue这个项目已经安装完成,并且项目启动成功

使用webStrom启动项目:在项目里面点击package.json文件

然后右键,点击show npm Scripts

能在浏览器打开看到这个表示启动成功

其实启动过程就是运行package.json文件里面的

时间: 2024-10-04 12:43:08

vue安装(vue-cli脚手架安装)的相关文章

npm 在安装 Vue脚手架命令(npm install -g @vue/cli)时报错安装报错--“Unexpected end of JSON input while parsing near&#183;&#183;&#183;”

在安装Vue的脚手架(npm install -g @vue/cli 项目名称)时,提示: Unexpected end of JSON input while parsing near 其实,但凡使用npm 时,只要提示这个,都可以按照以下几种方式进行尝试. 第一种:删掉package.lock.json 第二种:清除cache npm cache clean --force第三种:进入下面这个文件夹,把文件夹npm-cache下的内容删除掉(清除cache) 路径:C:/Users/DELL

关于npm和yarn 安装vue脚手架

第一篇博客有点小紧张.轻喷~ 第一步:安装node.js       地址 --------https://nodejs.org/en/ 详细步骤这里就不写了    可以去看     地址 --------https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html 第二步:下载完了之后进入cmd  输入node -v查看版本号 看到上面表示安装成功.node.js是自带npm的,直接npm install -g @vue/cli

vue脚手架安装

//---------------------------------------startvue新版脚手架 //卸载旧版本npm uninstall vue-cli -g cnpm install -g @vue/cli或yarn global add @vue/cli //新版本 vue --versioncnpm install webpack -g e:cd E:\AvsWorkSapcevue create ysxVue //启动项目 yarn serve // OR npm run

安装Vue安装脚手架以及一直卡着不动的问题

1.首先我们去nodejs官网:https://nodejs.org/en/download/ (下载nodejs,下载自己电脑想匹配的最新版本) 2.其次 去下载一个cnpm (注释:淘宝npm镜像,这个是阿里把外国的npm服务器搬到我们中国来了,用淘宝镜像npm下载一些配置文件会更快一些) 操作如下:电脑右下角  window输入cmd, 把 npm install -g cnpm --registry=https://registry.npm.taobao.org 复制到cmd里面去就可以

Vue学习之vue-cli脚手架下载安装及配置

Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量,将下面的路径配置到环境变量中. 由于 Node.js 中默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,如果要使用自己安装的 npm 时,如 cnpm ,那么就需要像上面

vue开发搭建(npm安装 + vue脚手架安装)

一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue-cli:   用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 原文:https://www.cnblogs.com/goldlong/p/8027997.html (部分步骤有些修改) 参考文:htt

Vue2.0 实战项目(一) ——安装vue.cli

1.打开Vue脚手架的github地址:https://github.com/vuejs/vue-cli,在README查看如何安装 2.通过npm安装vue $ npm install -g vue-cli 3.通过webpack安装 $ vue init webpack myProjectName 4.切换到创建的项目目录,然后安装依赖文件 npm install

vue脚手架安装步骤vue-cli

1.环境搭建     安装node.js: 从node.js官网下载并安装node,安装过程很简单.  npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 2.安装vue-cli脚手架构建工具 先看下你的电脑有没有安装vue 没有就安装 如下 $ vue //回车,若出现vue信息说明表示成功 $ npm install -g vue-cli //回车,等待安装... 3.用vue-cli构

Mac OS X下安装Vue脚手架(vue-cli)

前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue是Angular和React的结合,既有Angular的模板语法也有React的组件化体系,以至于促使其发展飞快.下面来就来讲讲Vue脚手架(vue-cli)的安装吧. 安装vue(使用npm 推荐) # 全局安装 vue-cli $ npm install --global vue-cli # 创