安装vue.js以及创建第一个vue项目
安装vue.js
第一步:下载node.js
node.js官网下载地址:https://nodejs.org/en/
选择推荐的或你想要的版本下载,下载完后,安装路径自定义,自行安装。
我的安装路径是:F:\gongju\nodejs
第二步:配置node.js并验证安装是否成功
在你的安装路径中创建node_global与node_cache文件夹
以管理员身份运行cmd任务管理器
执行npm路径配置命令
npm config set prefix "F:\gongju\nodejs\node_global"
npm config set cache "F:\gongju\nodejs\node_cache"
查看本地仓库
npm list -global
更换镜像站为国内的淘宝镜像站
npm config set registry=http://registry.npm.taobao.org
查看本地镜像能不能通
npm config get registry
输入node -v 查看版本,输入npm -v 查看版本
如下图所示时,则表示安装成功。
此时,还要注意F:\gongju\nodejs\node_modules\npm路径下npmrc文件,
第三步:安装vue相关包
重新打开cmd
npm install vue -g 安装vue
npm install vue-router -g 安装vue-router
npm install vue-cli -g 安装vue脚手架
这里的-g是指安装到global全局目录去
安装完成后,此时安装的文件都会到F:\gongju\nodejs\node_global\node_modules中
关闭cmd
新建一个系统变量NODE_PATH,把F:\gongju\nodejs\node_global\node_modules写进去。
对path环境变量添加 F:\gongju\nodejs\node_global
重新打开cmd
运行vue -V ,如果显示版本号 则到此安装完成(注意-V一定是大写的V)
到这一步,我们的vue.js就算安装成功了。
创建第一个vue项目
首先我们创建一个文件夹:F:\LianXi\vue_demo
并将任务管理器进入到该文件夹中
我们选择安装webpack 命令:vue init webpack aaa(aaa是自己起的名字)
然后按照指示输入name 和 description,按回车
下面的都可以直接输入y,也就是yes来确定使用。按回车就开始创建了。
这样我们的vue项目就创建好了。
进入到aaa文件夹中,最后我们输入:npm run dev 运行, 我们会看到
8080端口打开了
我们去浏览器中打开localhost:8080去看一下