1 安装Node.js

参看 node.js环境安装
   http://www.cnblogs.com/richerdyoung/p/7265786.html

2 安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org 

3 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

cnpm install -g vue-cli

输入:vue,回车,若出现vue信息说明表示成功

4 切换到你的项目目录

cd desktop/vue

5 新建vue项目

vue init webpack vuetest 

6 一路回车(第4步ESLint 可以一路n,大师请忽略n)
 

进入新建项目

cd vuetest 

cnpm install 

npm run dev

目录结构

  • main.js 是我们的入口文件,主要作用是初始化vue实例并使用需要的插件
  • App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
  • index.html文件入口
  • src放置组件和入口文件
  • node_modules为依赖的模块
  • config中配置了路径端口值等
  • build中配置了
  • webpack的基本配置、开发环境配置、生产环境配置等

【VUE】Mac下vue 开发环境搭建,以及目录结构的更多相关文章

  1. mac下java 开发环境搭建

    mac配置java开发环境: jdk1.7 +sdk1.7+maven +tomcat   1.先安装jdk ,才能安装sdk . 2 mac中jdk1.7的默认位置:/Library/Java/Ja ...

  2. mac下Android开发环境搭建

    之前一段时间在学习ios的开发,近一段时间想着也接触下Android开发,以来加深对移动端开发的理解.这里根据自己配置Android开发环境的过程,比较详细的来总结下自己的安装过程,希望对一些正准备配 ...

  3. Mac下JAVA开发环境搭建

    最近开始学习JAVA, 首先配置下环境! 1.Mac自带的jdk版本老了,需要到oracle官网去下载新的jdk,具体下载那个版本看个人需求,然后安装.   安装完成之后打开Terminal, 执行命 ...

  4. Mac下Cordova开发环境搭建

    xcode下载 从Mac App Store 下载Xcode,只需要在Store键入Xcode,下载第一个就ok了 cordova安装与配置 cordova需要node安装,使用Safari打开nod ...

  5. mac下php开发环境搭建+CI框架使用

    一.启动apache: apachectl start 停止: apachectl stop 配置文件: vi /etc/apache2/httpd.conf 一.修改端口 因为80端口不想被占用,8 ...

  6. Mac下R语言环境搭建

    Mac下R语言环境搭建 博主在数据分析的时候一直用的python(MATLAB太重了),最近跟其他搞学术的人合作,需要用一下R语言,所以也打算顺便学习一下R. R语言简介 R语言是用于统计分析,图形表 ...

  7. OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建

    # OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建 [-= 博客目录 =-] 1-学习目标 1.1-本章介绍 1.2-实践内容 1.3-相关说明 2-学习过程 2.1-hom ...

  8. Windows 7 下 PHP 开发环境搭建(手动)

    Windows 7 下 PHP 开发环境搭建 1.说明 做开发的都知道一句话,就是“站在巨人的肩膀上”.确实现在打开浏览器随便一搜很多一键安装PHP环境的软件,比如wamp.xampp.AppServ ...

  9. NDK在windows下的开发环境搭建及开发过程

    在Android应用的开发工程中,不管是游戏还是普通应用,都时常会用到.so即动态链接库,关于.so是什么玩意儿,有什么好处,这个大家可以在网上查一下,本人不做过多解释..so本是linux下的文件类 ...

  10. Android下NDK开发环境搭建

    Android下NDK开发环境搭建 1.     AndroidNDK安装与配置 1.1  NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP部 ...

随机推荐

  1. linux 中的进程wait()和waitpid函数,僵尸进程详解,以及利用这两个函数解决进程同步问题

    转载自:http://blog.sina.com.cn/s/blog_7776b9d3010144f9.html 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / wait ...

  2. protobuf--数据序列化及反序列化

    ProtoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,可用于表示通信协议和数据存储等各方面,与XML相比,ProtoBuF更小更快更简单.你可以用定义自己ProtoBuf的数据结构,用P ...

  3. DataGridView使用技巧九:DataGridView的右键菜单(ContextMenuStrip)

    DataGridView,DataGridViewColumn,DataGridViewRow,DataGridViewCell有ContextMenuStrip属性.可以通过设置ContextMen ...

  4. No supported encrypter found. The cipher and / or key length are invalid.

    终端使用如下命令: php artisan key:generate 将生成的key复制到config/app.php替换82行的APP_KEY键值.

  5. EasyUI-datagrid中load,reload,loadData方法的区别

    EasyUI比较常用,其中的datagrid比较复杂,它有其中有load,reload,loadData这三个方法,它们都有相同的功能,都是加载数据的,但又有区别. load方法,比如我已经定义一个d ...

  6. R工具包

    直到12月初在微软技术大会,看到我软的工程师演示R的使用,我就震惊了,然后最近在网上到处了解和爬一些R的资料,看着看着就入迷了,这就是个大宝库了,以前怎么没发现,看来还是太狭隘了.直到前几天我看到这个 ...

  7. SAX与DOM解析XML的区别

    解析xml有四种方法:DOM,SAX,DOM4j,JDOM.     我们主要学了两种:DOM和SAX.     DOM适于解析比较简单的XML而SAX则适于解析较复杂的XML文件.各有各的好. DO ...

  8. php插入htm htm插入php的变量

    <?php $file = "ueditor\php\upload\image\*\*.png"; foreach (glob("$file") as $ ...

  9. 关于Android中Fragment静态和动态加载的方法

    一.静态加载 1.首先创建一个layout布局fragment.xml,里面放要显示和操作的控件 2.创建一个layout布局main1.xml,用来实现页面的跳转(跳转为要实现静态加载的界面) 3. ...

  10. selenium定位方法(java实例)(二)

    从下图中可以看到selenium有三类定位元素的方法,一种是直接通过属性.标签以及链接来定位,一种是XPath方式,最后一种是CSS方式. 下表列举了元素定位的例子 selenium之页面元素定位方法 ...