一、安装node.js(自带npm低版本安装)
1、官网下载node.js
2、双击文件,进行安装 ,除了可以更换一下安装目录,基本上一路next:
- 在这里可以更换一下目录,比如此处我安装在
D:\webTools\nodejs
- 红框处默认安装npm,我们这里什么都不动,直接点next
3、(可选)安装程序完成后,检查
- 打开刚才设置的安装目录
D:\webTools\nodejs
,可以看到目录结构 - cmd查看环境变量
echo %PATH%
在结果里可以找到D:\webTools\nodejs\;
C:\Users\stablemesotheca\AppData\Roaming\npm
或者说出现 node 和 npm 即可 - cmd查看Node.js版本号
node.js -v
node.js为最新稳定版本 - cmd查看自带安装的 npm版本号
npm -v
自带的npm并非最新版本
4、设置环境
(1) 设置全局目录,设置到安装目录下
npm config set prefix "D:\webTools\nodejs\node_global"
(2) 设置缓存目录,设置到安装目录下
npm config set cache "D:\webTools\nodejs\node_cache"
(系统盘c盘的用户目录的node_global的文件夹可以删除,留着也没影响)
- (可选)可以使用
npm list -global
查看全局目录(node_global)中的模块,此时未安装任何模块,查看为空
(3) 环境变量PATH添加D:\webTools\nodejs\node_global(否则,安装完vue会找不到启动路径)
配置完环境变量,cmd要关闭重新打开才有效
(4) 配置镜像源,加速以后的模块下载
npm config set registry=http://registry.npm.taobao.org
- (可选)检查配置信息
①配置信息
npm config list
或者打开C:\Users\stablemesotheca.npmrc这个配置文件,可以看到刚才的配置信息
②检查镜像站是否正常
npm config get registry
③检查能否通过镜像站获得模块(比如vue)信息
npm info vue
5、更新npm模块
- 安装/更新模块命令
npm install 模块名 -g
npm install :安装/更新执行命令
npm uninstall :卸载
-g:表示安装到global目录下
更新npm
npm install npm -g
版本更新至6.14.7
(安装完后再次执行 npm list -global
可以看到刚安装的npm模块)
三、安装vue及组件
安装vue.js
npm install vue -g
如果安装了没版本号,可以换成
npm install vue-cli -g
- 查看vue版本号,确认安装配置成功 p.s. v要为大写,否则报错
vue -V
安装vue-router
npm install vue-router -g
安装vue脚手架
npm install vue-cli -g
四、快速构建一个vue
选择一个地方准备开始建一个vue项目(此处我选择D:\webProject作为根目录)
cmd 进入根目录,执行初始化一个vue工作空间,此处我起名为myvue,项目名称设置为vuedemo
vue init webpack vueDemo
init 是为了生成package.json文件,里面有描述项目的信息。
Runtime选择默认第一个即可。
选项都是为了快速新建一个小demo,实际开发按照需要配置。
进入项目目录——myvue,使用npm install
安装依赖
npm install根据package.json里的模块信息生成依赖。
运行项目npm run dev
提示项目已经启动,复制项目地址,打开浏览器,输入即可访问项目主页
五、打包及项目结构
- 如果要打包部署,ctrl+c停止后执行命令
npm run build
可以生成静态文件,部署得到的dist文件夹即可。
【dist : distribution(最终发布产品)】 - 使用工具打开项目,也可以在控制台这里输入命令
- 项目结构说明
build 可以配置loading动画/删除创建目标文件夹/webpack编译;输出信息/配置静态资源路径/配置webpack等;
package.json 配置名称/版本/许可证等元数据;可以配置依赖模块(dependencies);可以指定运行脚本命令的npm命令行缩写(scripts字段)
static存放mock数据,其他类型如json/xml的文件;
src</>目录存放源代码:
六、其他vue插件
进入项目文件夹,安装axios和elementUI
npm install axios vue-axios element-ui --save
格式化时间日期的moment.js
npm install moment --save