vue环境搭建到项目启动

168 阅读3分钟

Vue的开发需要在node环境下运行

这里node选择配置全局

首先官网下载node,选择安装路径安装,高版本node可能不支持win7

安装完成之后,可以打开cmd node -v检查当前安装node版本号 自带安装npm(npm -v) 显示版本号安装成功

找到node安装路径下node_modules平级文件,新建node_global/node_cache两个文件夹

执行命令 npm config set perfix "当前文件node_global文件路径" npm config set cache "当前文件node_cache文件路径"

(可以按到c盘下面当前用户/appdata/roaming/npm和npm-cache,安装全局就是把这两个文件移动到刚刚新建的文件下面)

去配置全局系统的环境变量 计算机》属性》高级系统设置》高级》环境变量》系统变量》》(以下是window7配置方法)》添加NODE_PATH路径

node_global文件(因为要修改一些nodejs默认的模块调用路径,因为模块的安装位置变了,正常来说这一步就好用了,但是我的电脑不行,于是多配置了一步在Path路径下面一堆文件最后面加上了下面的路径 D:\Vue\node\node_global\node_modules;D:\Vue\node\node_global;C:\Program Files\nodejs\ )

配置完进行验证
cmd 可能需要从新打开 输入 node 》enter 输入require("cluster")模块是否加载 显示一大堆正常加载,如果报错去检查全局配置

正常加载之后 切换淘宝镜像,因为用国外资源太慢

输入 npm --registry https://registry.npm.taobao.org install cluster -g
校验是否成功   npm config get registry  成功看到下面淘宝镜像网址

安装express框架  npm install express   一个框架  不知道干嘛用的...(之后问了王恒这个是node的框架,起目配置端口之类的)
验证是否安装成功   node》enter》 require("express")  一堆信息,安装成

上面一堆环境装完 --------------------------------------

安装全局VUE npm insatall vue -g
	    npm install vue-router -g  在global   modules 文件下面能看到  Vue-router  vue文件夹
	    npm install vue-cli -g(3.0之后是  npm install @vue/cli -g    卸载之前的  npm UNstall vue-cli )   脚手架安装
	(如果输入 Vue命令提示不是命令 ,去看全局变量配置,按照上面配置不会出现这个问题,万一)

输入 Vue -V查看Vue版本 出现版本号安装成功 

下面到新建项目 仅限cli3.0- 找到放文件的目录下面这里直接刚在d盘下面直接 d:》enter Vue init webpack "要建的文件夹名字"》enter》 几个问题配置
name》项目名称 description》描述 author》作者 build》dist目录下是不是要生成文件 (代考证明) vue-router>yes eeslint》no e2e》no set up 》no enter》等会

		dos命令  cd vue01文件夹下面   输入npm  install
		npm run dev
		项目跑起来....
		在 vue01文件夹下 npm run bulid  生成静态文件  编辑器打开 

开始吧.........

特他妈不知道自己之后能不能看懂 ...

(之后看哔哩哔哩的视频补充)

还有一种安装Vue项目的方法 环境都配置好了之后就是内些全局之类的 安装Vue项目 据说不会很多提示非官方 项目文件不会像是官方给出的方法项目目录特别多 适合中小型项目

用 Vue init webpack-simple 项目名称 配置询问的一堆》cd 项目名称 》npm install 》安装完之后 》 npm run dev

下面是cli 3.0+之后的版本在项目环境搭建完成的情况下,新建一个vue的项目 安装过程

cli 3.0之后创建项目不能用上面的命令 要用 vue create 项目名称 这样创建项目》之后是要问要用默认配置 还是自己配置(待研究)》npm run serve 项目起来