目录
1.node环境的安装和配置
下载地址:https://nodejs.org/zh-cn/download/
根据自己电脑系统及位数选择,我的电脑是Windows系统、64位、想下载稳定版的.msi(LTS为长期稳定版)这里选择
windows64位.msi
格式安装包。
下载步骤
配置环境变量
查看是否安装成功 node -V 在cmd运行
一部分常用命令
npm -v:查看npm安装的版本。
npm init:会引导你建立一个package.json文件,包括名称、版本、作者等信息。
npm list:查看当前目录下已安装的node包。
npm ls:查看当前目录下已安装的node包。
npm install moduleNames:安装Node模块到本地目录node_modules下。
npm install < name > -g:将包安装到全局环境中。
npm install < name > --save:安装的同时,将信息写入package.json中,项目路径中若是有
① 打开安装的目录(默认安装情况下在C:\Program Files\nodejs)
② 在安装目录下新建两个文件夹【node_global】和【node_cache】
再次打开cmd命令窗口,输入npm config set prefix “你的路径\node_global”
npm config set prefix "C:\NODE\nodejs\node_global"
npm config set cache “你的路径\node_cache” 可直接复制刚刚新建的空文件夹目录
npm config set cache "C:\NODE\nodejs\node_cache"
.vue脚手架环境安装
脚手架:可以理解为自动帮我们构建项目的工具。 vue的自动化构建工具是node.js帮我们做的,这就是我们为什么要下载node的原因。前提是我们已经安装好脚手架
设置环境变量,打开【系统属性】-【高级】-【环境变量】,在系统变量
中新建
变量名:NODE_PATH
变量值:C:\Program Files\nodejs\node_global\node_modules
安装我们常需要的模块如下图
由于下载速度较慢,我们可以使用国外镜像 cmd执行
npm install -g cnpm --registry=https://registry.npmmirror.com
3.vue项目的创建
Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具)命令行界面。
环境安装
命令行执行
1.安装vue
npm install vue
2.安装webpack(Webpack
:是一个开源的前端打包工具。)
npm install webpack -g
安装vue脚手架:
npm i -g @vue/cli-init
vue-cli2.x
创建项目:
vue init webpack 项目名称
vue-cli3.x
创建项目:
vue-cli3.x创建项目:
vue create projectname
4.项目运行流程
1.进入终端执行命令
npm run serve
2.成功运行如图