Node、webpack、脚手架vue-cli2、3,介绍与安装,一条龙教程#yyds干货盘点#
nodejs简介:Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 JavaScript程序可以运行在浏览器中 JavaScript程序可以运行在Node.js环境中 Node.js在浏览器外运行的。
安装Vue脚手架需要先安装Node.js (安装好了的不要随意卸载Nodejs)
安装Node.js:
1、win+r输入cmd 或者在我的电脑打开cmd
查看是否安装nodejs:node -v
[*]下载Node.js:(找到与自己电脑对应的)
[*]中文文档地址:http://nodejs.cn/download/
[*]双击打开下载好的node.js,点击next,勾选两个复选框即可
[*]查看是否安装成功:node -v 出现node.js的版本号就是已经安装成功
[*]安装Nodejs时会一起安装npm,npm的作用是对Nodejs依赖的包进行管理,也可以理解
[*]用来安装或卸载nodejs需要的东西
[*]如果不是安装在C盘就走1.~4
[*]配置一下npm在全局安装模块时的路径和缓存的路径
[*]在安装node.js目录下,新建两个文件夹
[*]node_global(全局)
[*]node_cache(缓存)
[*]打开cmd命令窗口
[*]npm config set prefix "F:\nodejs\node_global"
[*]npm config set cache "F:\nodejs\node_cache"
[*]打开我的电脑==》右击此电脑===>属性===>高级设置===>环境变量===>path===>编辑===>新建===>
[*]node_global的文件位置放上去
由于npm是国外的服务器,所以下载比较慢,我们需要安装淘宝镜像 安装淘宝镜像:
1、复制网址:
2、复制淘宝镜像的指令: npm install -g cnpm --registry=https://registry.npm.taobao.org
3、打开cmd:将复制下来的指令粘贴即可
webpack:构建工具和打包的
安装webpack:
npm i(install) webpack-cli -g(global)
cnpm i(install) webpack-cli -g(global)
当webpack出现错误的时候(使用以下指令,重装webpack)
卸载webpack:
[*]安装install
[*]卸载uninstall
cnpm uninstall webpack-cli -g(global)
Vue脚手架:
vue-cli就是vue的脚手架工具,和我们在工地上看到的脚手架是一样的,它帮助我们搭建基本的开发环境, 就好比如架子搭好了,利用它搞定目录的结构、本地调试、单元测试、热加载及代码部署
热加载(不需要重启项目)2.X版本的脚手架安装:
1、cnpm i vue-cli -----安装vue2.x版本的指令
2、vue -V(大写)----查看vue的版本(出现版本号,就是安装成功)
3、2x版本创建项目
vue init webpack (项目名)--->回车
注意:项目名字母不能大写,不能使用中文
原因:这个指令的意思是初始化一个vue项目,webpack是构建工具,
也就是整个项目是基于webpack的。其中项目名称是整个项目文件加的名称,
这个文件夹会自动生成在你指定的目录中。
project name ---> 项目名称 ---》回车
author 作者 --->回车填写作者名
vue-router是否选择安装路由,这是官方的路由
eslint--->no 严格规范(规范写代码的格式)
test 是否安装单元测试
e2e 是否安装e2e测试
在cmd命令窗口中:ctrl+C按2次,是停止操作安装3.X版本
需要安装桥接工具 向下兼容: 如果使用npm安装较慢就使用cnpm安装
npm i -g @vue/cli-init cnpm i -g @vue/cli-init
安装3.X版本的脚手架指令
cnpm i -g @vue/cli
创建项目
vue create 项目名称
使用什么方式运行项目:npm(第一个选项)---->弹出一个窗口
default是一默认使用配置,默认安装及自动配置babel,eslint
Manually select features是自定义配置,需要我们手动配置,可以自己选择配置什么东西
使用↑↓k控制上下---》回车选择(确定)
初始化项目
cd 项目名
运行项目:npm run serve
3.X版本相当于2.X版本:
更简洁最后
如果对您有帮助,希望能给个
页:
[1]