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
二、NPM安装
1、下载npm软件,URL: https://nodejs.org/en/
2、本机软件存放路径:E:\开发工具\npm\node-v8.12.0-x64.msi
3、软件安装路径: d:\Program Files\nodejs\
注:一路默认即可。
三、了解NPM常用命令
1、查看环境变量:echo %PATH%
2、查看node版本: node -v
这里看到npm已经安装好:
3、查看npm版本: npm -v
4、查看npm的本地仓库: npm list –global
5、修改npm的本地仓库:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
这里修改仓库到d盘,成功
四、在NPM中安装插件
1、配置淘宝 NPM 镜像
国内直接使用 npm 的官方镜像非常慢,这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
输入命令:npm config set registry=https://registry.npm.taobao.org
输入命令:npm config list 显示所有配置信息,我们关注一个配置文件
C:\Users\Administrator\.npmrc
2、检查一下镜像站行不行命令1
输入命令:npm config get registry
3、检查一下镜像站行不行命令2, 获取vue信息(此时并非安装)
输入命令:npm info vue
4、安装更新模块,命令:npm install npm –g
a、npm install代表安装更新, 第二个npm是指的模块名字
b、 -g:代表安装到global目录下
5、查看升级,命令:npm –v
6、查看global里有什么模块,命令:npm list –global
五、配置VUE
1、配置PATH和NODE_PATH
a、修改path: D:\Program Files\nodejs\node_global;
b、新增NODE_PATH:D:\Program Files\nodejs\node_global\node_modules
2、配置vue, 配置 vue-router
3、安装vue脚手架,命令:npm install vue-cli –g
4、验证vue是否安装成功, 命令: vue -V
这里的v是大写;
五、初始化vue 项目
注意:vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。
1、切换到d盘根目录,并输入: vue init webpack vue01
最后安装成功后:
2、进入目录vue01, 初始化并输入命令:npm install安装依赖
3、输入命令:npm run dev,得到如下:
成功界面,提示打开地址http://localhost:8080
4、生成静态文件,输入命令:npm run build
(生成静态文件,打开dist文件夹下新生成的index.html文件)
五、nmp下新建vue01目录描述
vue开发搭建(npm安装 + vue脚手架安装)的更多相关文章
- Vue+element搭建后台管理系统-二、安装插件
我们继续上一章的内容,上一章讲到我们已经能将项目成功跑起来了,那么我们接下来把项目必用的东西完善一下. 一.安装elementUI 终于到了我们的男二了,继续在VSCode中新建一个终端,然后通过这个 ...
- 从零开始搭建vue开发环境及构建vue项目
1.安装node.js 安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的 node.js版本 node.js自 ...
- Vue 开发技巧或者说Vue知识点梳理(转,自个学习)
Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $child ...
- Mac OS X下安装Vue脚手架(vue-cli)
前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue ...
- npm安装vue详细教程(图片详解)
npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...
- windows10使用npm安装vue、vue-cli
从网上下载了一个免费的vue.js前端模板,准备和Django整合出一个项目出来,然后发现前端代码都是.vue文件,已经整合过.html,很容易,感觉这个.vue的前端稍微复杂一些 本文主要参考博客及 ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- Vue.js 学习入门:介绍及安装
Vue.js 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 ...
- 前端(二十三)—— Vue环境搭建
目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...
随机推荐
- SpringBoot获取配置文件,就这么简单。
在讲SpringBoot 获取配置文件之前我们需要对SpringBoot 的项目有一个整体的了解,如何创建SpringBoot 项目,项目结构等等知识点,我在这里就不一一讲述了,没有学过的小伙伴可以自 ...
- JavaScript (二) js的基本语法 - - 运算符、流程控制
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.运算符 1.一元运算符 ++ -- 都是运算符 ++ 和 -- 可以分为:前+ 和后+ and 前- ...
- java实现第四届蓝桥杯大臣的旅费
大臣的旅费 题目描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任何一个大 ...
- java实现第六届蓝桥杯三羊献瑞
三羊献瑞 题目描述 观察下面的加法算式: 祥 瑞 生 辉 三 羊 献 瑞 三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代表相同的数字,不同的汉字代表不同的数字. ...
- 从linux源码看socket的阻塞和非阻塞
从linux源码看socket的阻塞和非阻塞 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 大部分高性能网络框架采用的是非阻塞模式.笔者这次就从linux ...
- Windows下mysql的基础操作
1.数据库表操作: - 首先启动mysql服务器,在安装mysql的目录下打开cmd窗口,运行mysql:'mysql.exe -hlocalhost -p3306 -uroot -p123456'; ...
- 利用Python将多个PDF文件合并
from PyPDF2 import PdfFileMerger import os files = os.listdir()#列出目录中的所有文件 merger = PdfFileMerger() ...
- CentOS6.5 开机启动自动运行redis服务
[一].查找和设置自己的redis路径参数 环境变量 PATH=/usr/local/bin:/sbin/:/usr/bin:/bin 端口 REDISPORT=6379 文件位置 EXEC=/usr ...
- [CQOI2007]矩形
题目 点这里看题目. 分析 插头 DP ,考虑枚举一下两块之间的分割线,本质上就是两个端点都在边界上的路径. DP 过程中,我们将没有端点在边界上面的路径称为 1 路径,反之叫 2 路径 ...
- Excel经典教程之一
照片名称:未命名 照片名称:自动筛选 照片名称:在Excel中字符替换 照片名称:在Excel中直接编辑“宏” 照片名称:在Excel中为导入外部数据 照片名称:在Excel中行列快速转换 照片名称: ...