最近项目要使用VUE.JS作为前端框架,进行前后端的分离,虽然要使用2.0进行开发,但是要先基于1.0进行学习,逐步进行理解与开发。
由于没搞清楚vue2.0和vue1.0环境中部分内容的关系,所以在写程序时碰到好多坑,下述是论述的1.0的配置。现在刚初学几天,大概理解到在使用vue-vuerouter-webpack时一定要注意版本保持一致,可通过修改项目中的包。json文件,重新安装对应软件后得到对应的开发环境,希望初学者警惕。
我现在的开发环境为windows7多——64位
首先要安装GIT
GIT安装成功后,可通过节点- v和npm - v查看对应安装版本。
上述图片中,sell03是我项目主目录
下述操作最好在与sell03同级的目录下操作。
注意下属的命令操作都在上述安装的GIT的DOS环境中操作。
首先安装cnpm,这个可以在淘宝npm镜像网站“https://npm.taobao.org/闭业较率霰鹈葱小?/p>
别名cnpm=皀pm——注册表=https://registry.npm.taobao.org \
——缓存=$ HOME/.npm/；捍?cnpm \
——disturl=https://npm.taobao.org/dist \
——userconfig=$ HOME/.cnpmrc”
安装cnpm
cnpm安装
安装vue-cli (g是全局安装,——拯救是默认把记录写入到操作执行命令目录里的package.json文件中)
cnpm安装vue-cli - g -保存
安装完成后可查看vue的帮助文档vue——帮助
查看版本
vue - V(注意是大写的V)
查看列表vue列表
安装1.0的webpack
vue init webpack # 1.0, cd志愿者项目志愿者项目
npm npm安装运行开发可查看GIT控制台或浏览器打开“http://localhost: 8080”查看是否启动成功
如果启动成功的话,在志愿者项目的目录中,
设置包。json在依赖中配置
“style-loader”:“^ 0.18.2”,
“笔”:“^ 0.54.5”,
“stylus-loader”:“^ 3.0.1”,
“vue-resource”:“^ 1.0.1”,
“vue-router”:“^ 0.7.13”
一定要在志愿者项目下执行下述命令,
npm安装手写笔stylus-loader css-loader style-loader——保存
这样安装的话,默认读的就是项目本身的包。json的文件。如果加- g全局安装的话,那么是按照最新的安装包安装。
cnpm安装vue-router vue-resource——保存
重新编译一下
npm运行构建
上述没错,看控制台即可
npm运行dev
如果浏览器没正确显示网页,谷歌浏览器按F12,再次点击F5刷新页面,查看控制台输出即可排查错误。
