资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

基于win7在GIT中设置VUE1.0开发环境-创新互联

最近项目要使用VUE.JS作为前端框架,进行前后端的分离。虽然要使用2.0进行开发,但是要先基于1.0进行学习,逐步进行理解与开发。

创新互联公司是专业的珠晖网站建设公司,珠晖接单;提供成都网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行珠晖网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

由于没搞清楚vue2.0和vue1.0环境中部分内容的关系,所以在写程序时碰到好多坑,下述是论述的1.0的配置。现在刚初学几天,大概理解到在使用vue-vuerouter-webpack时一定要注意版本保持一致,可通过修改项目中的package.json文件,重新安装对应软件后得到对应的开发环境,希望初学者警惕。

我现在的开发环境为windows7-64bit

首先要安装GIT

基于win7在GIT中设置VUE1.0开发环境

GIT安装成功后,可通过node -v和npm -v查看对应安装版本。

上述图片中,sell03是我项目主目录

下述操作最好在与sell03同级的目录下操作。

注意下属的命令操作都在上述安装的GIT的DOS环境中操作。

首先安装cnpm,这个可以在淘宝NPM镜像网站“https://npm.taobao.org/”找到下述alias执行。

alias cnpm="npm --registry=https://registry.npm.taobao.org \

--cache=$HOME/.npm/.cache/cnpm \

--disturl=https://npm.taobao.org/dist \

--userconfig=$HOME/.cnpmrc"

安装cnpm

cnpm install

安装vue-cli(-g是全局安装,--save是默认把记录写入到操作执行命令目录里的package.json文件中)

cnpm install vue-cli -g --save

安装完成后可查看vue的帮助文档

vue --help

查看版本

vue -V(注意是大写的V)

查看列表

vue list

安装1.0的webpack

vue init webpack#1.0 yourproject

cd yourproject

npm install

npm run dev可查看GIT控制台或浏览器打开"http://localhost:8080"查看是否启动成功

如果启动成功的话,在yourproject的目录中,

设置package.json,在dependencies中配置

"style-loader": "^0.18.2",

"stylus": "^0.54.5",

"stylus-loader": "^3.0.1",

"vue-resource": "^1.0.1",

"vue-router": "^0.7.13"

一定要在yourproject下执行下述命令,

npm install stylus stylus-loader css-loader style-loader --save

这样安装的话,默认读的就是项目本身的package.json的文件。如果加-g全局安装的话,那么是按照最新的安装包安装。

cnpm install vue-router vue-resource --save

重新编译一下

npm run build

上述没错,看控制台即可

npm run dev

如果浏览器没正确显示网页,谷歌浏览器按F12,再次点击F5刷新页面,查看CONSOLE输出即可排查错误。

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


分享题目:基于win7在GIT中设置VUE1.0开发环境-创新互联
网站网址:http://cdkjz.cn/article/cdhose.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220