当前位置:主页 > 建站服务 >

Vue.js入门(1)—安装并生成自己的vue项目

Vue.js 引用百度百科的话:是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。一.项目所需环境: Node.js环境 Npm环境(建议使用cnpm国内淘宝镜像) Vue-cil 脚手架构造环境二.如何安装node.js1.百度搜索node官网

node.js2、选择合适的安装包,然后傻瓜式安装。nodejs安装3、解压下载好的node.js安装包,并新建node_global"及"node_cache"两个文件夹未建立文件夹之前:

安装文件夹新建后:路径4、配置环境变量PATH打开系统变量,选择path,再点击编辑:path路径把刚刚解压的nodejs路径粘贴进去:选择路径右击【我的电脑】--》【属性】--》【高级系统设置】--》【环境变量】--》【系统变量】--》【Path】-->增加两个路径(新建那两个文件夹的路径)5、打开cmd,输入node -v测试是否有node环境CMD命令温馨提示:如果提示说找不到命令第1种可能是设置错了第2种就是需要重启电脑6、配置环境变量NODE_PATHNODE_PATH7、设置prefix和cache输入以下两行命令行:npm config set prefix "D:\Program Files\node-v6.11.5-win-x64\node_global"npm config set cache "D:\Program Files\node-v6.11.5-win-x64\node_cache"命令提示三. 测试环境1、打开cmd,输入node -v测试是否有node环境。测试代码12、在cmd,输入npm-v测试是否有npm包测试代码2四、 使用淘宝镜像文件cnpm代替npm原因:如果使用npm是使用国外安装包,可能由于一些原因会造成卡顿(传输时间过长)或者无法使用(屏蔽问题);所以,建议使用国内的淘宝镜像cnpm;1. 输入npm install -g cnpm --registry=http://registry.npm.taobao.org2. 命令安装cnpm资源; Ps:过程可能会有点长,请耐心等待;五、安装vue-cli脚手架安装包输入cnpm install -g vue-cli命令行温馨提示:建议使用cnpm国内资源安装,这样等待时间会短一些,也不会导致卡顿;六、建立新的vue.js项目:1、打开命令行工具 输入cd desktopcd2、输入命令行vue init webpack firstVuejs温馨提示:这次整个项目是基于webpack搭建的vue.js项目;最后的firstVuejs为本项目名称。代码3、桌面自动生成项目4、使用命令行工具输入cd desktop/firstvuejs进入项目层代码温馨提示:如果像上图一样找不到路径可以cd .. 退回上一路径,再尝试一下。5、启动项目:输入npm run dev启动项目启动项目七、注意踩雷!!比如index.html在项目里为index.vue;style.css也需要改成style.css(作用相同)。