文档章节

使用nodeJs安装Vue-cli

木筏笔歆
 木筏笔歆
发布于 06/24 17:53
字数 1078
阅读 14
收藏 0

Vue脚手架就是一个Vue框架开发环境

脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其他事情浪费时间,总而言之,就是快速搭建项目,让我们可以早点去写代码

Vue开发环境离不开node.js

JavaScript之前只有在浏览器中运行,有了node.js这个平台后,让js可以在服务端运行。

一、node.js安装

1.node.js官网(https://nodejs.org/en/download/),安装过程基本直接next就行

2.安装完成后,使用cmd,输入node -v,测试下是否安装成功

(我们所需要的npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信息)

3.到这里node的环境已经安装完了,npm包管理工具也有了,但是因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以我们需要切换到淘宝的npm镜像——cnpm

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

使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替换就可以了

二、Vue安装

在用vue.js构建大型应用时推荐使用npm安装,npm能很好地和诸如webpack或browserify模块打包器配合使用。vue.js也提供配套工具来开发单文件组件

cnpm install vue

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

vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用

# 全局安装 vue-cli

cnpm install --global vue-cli

四、创建一个基于webpack模板的新项目

使用vue创建一个项目名叫mydemo

vue init webpack mydemo

(注:该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,可以避免不必要的麻烦)

五、运行项目

进入项目目录文件夹(mydemo)中,就可以使用vue进行开发啦

cnpm run dev

六、发布项目

npm run build

补充:项目目录结构


在上述步骤全部完成后,使用webstorm编译器打开vue项目,发现【View】-【Tool Windows】下无npm面板。

来自百度:webstorm的识别,如果是打开项目之前没有package.json,是没有npm面板的。

解决方法:右键点击package.json,点击【Show npm Scripts】


满心欢喜地【run start】,竟然报错,大致意思是:package.json中无path,后来配置了环境变量

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

1.例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】

2.创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix "D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

3.设置环境变量,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框, 在【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_global\node_modules】, 将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

4.配置完后,安装个module测试下,我们就安装最常用的express模块,打开cmd窗口, 输入如下命令进行模块的全局安装:

# -g是全局安装的意思

npm install express -g

参考:https://www.cnblogs.com/zhouyu2017/p/6485265.html

© 著作权归作者所有

共有 人打赏支持
木筏笔歆
粉丝 1
博文 38
码字总数 16325
作品 0
南京
Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will
04/05
0
0
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
05/22
0
0
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
05/22
0
0
使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七
05/09
0
0
Vue开发环境搭建全过程,一步一个坑

Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样 开发环境: Homebrew ( Mac的包管理神器 ) → Node.js→ cnpm(淘宝镜像,节省安装时间)→ we...

一墨编程学习
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

实战讲解高并发和秒杀抢购系统设计

互联网特别是电商平台,阿里双11秒杀、还有12306春运抢票、以及平时各种节假日抢购活动等,都是典型的高并发场景。 这类场景最大的特征就是活动周期短,瞬间流量大(高并发),大量的人短期涌...

xtof
31分钟前
0
0
代码质量管理平台-sonarqube

在工作中,往往开发的时候会不怎么注重代码质量的人很多,存在着很多的漏洞和隐患等问题,sonarqube可以进行代码质量的审核,而且十分的残酷。。。。。接下来我们说下怎么安装 进入官网下载:...

落叶清风
34分钟前
6
0
在Ubuntu安装和配置Sphinx

Ubuntu系统默认是配置有sphinx的,先检查一下,别多此一举。。。。。 在开始本指南之前,您需要: 一个Ubuntu 16.04服务器。 sudo的一个非root用户,您可以通过以下设置本教程 。 安装在服务...

阿锋zxf
42分钟前
1
0
Qt编写输入法V2018超级终结版

对于qt嵌入式linux开发人员来说,输入法一直是个鸡肋问题,要么不支持实体键盘同步,要么不能汉字输入,要么不支持网页输入等,这几年通过陆续接触大量的各种输入法应用场景客户,得到真实需...

飞扬青云
54分钟前
2
0
TypeScript基础入门之高级类型的多态的 this类型

转发 TypeScript基础入门之高级类型的多态的 this类型 高级类型 多态的this类型 多态的this类型表示的是某个包含类或接口的子类型。 这被称做F-bounded多态性。 它能很容易的表现连贯接口间的...

durban
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部