安装vue脚手架

VUE-CLI脚手架的搭建过程

1、安装node js

  下载地址:http://nodejs.cn/download/

2、安装完成后运行Node.js command promptnode -v查看安装版本)


3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v 查看版本)


4、注册cnpm来代替npm  使用命令:npm install cnpm -g --registry=https://registry.npm.taobao.org

  如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"

3.安装webpack

    npm install webpack@3.8.1 -g             //-g全局安装webpack版本3.8.1==》          webpack -v查看版本号

5、安装vue脚手架vue-cli  命令:cnpm install -g vue-cli

  安装成功后可以用vue -V 查看vue版本6、cd到对应的目录下初始化vue项目  命令:vue init webpack my-project      Project name项目名       Project description项目名描述       Author作者邮箱       Use ESLint to lint your code?是否需要ESlist语法检查       Setup unit tests with Karma + Mocha?是否需要单元测试       Setup e2e tests with Nightwatch? Yes是否需要e2e测试 

7、package.json为项目依赖资源,如果要运行这个项目需要使用cnpm install安装依赖项(直接在项目文件夹路径下执行)

8、使用命令cnpm run dev启动项目,浏览器会打开http://localhost:8080/#/看到以下效果

  开发时属于热部署状态,代码保存后浏览器会自动刷新,错误提示也非常友好。


9、编译打包 cnpm run build

  会编译打包到项目dist文件夹下,然后我们就可以部署到服务器上(注意:如果你直接打开index.html,可能页面会是一片空白,这是由于你引用的js路径有问题)


10、安装axios插件

  cnpm install axios//生产环境

  npm install --save axios vue-axios//测试环境  两者都下载  在main.js 中写入以下内容:

  import Vue from 'vue'

  import axios from 'axios'

  import VueAxios from 'vue-axios'

  Vue.use(VueAxios, axios)  在页面中的用法:

  Vue.axios.get(api).then((response) => {

  console.log(response.data)

  })

  this.axios.get(api).then((response) => {

  console.log(response.data)

  })

  this.$http.get(api).then((response) => {

  console.log(response.data)

  })

  或者在main.js 中写入以下内容:

    import axios from 'axios'    Vue.prototype.$axios = axios

  使用页面

  this.$axios.get(api).then((response) => {

  console.log(response.data)

  })

11、安装jquery依赖

  npminstall jquery --save

在main.js中写入以下内容:    import $ from 'jquery'

12、脚手架目录介绍


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339