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. 【WPF】ListBox使用UserContrl作为子控件,引入UserContrl界面

    <ListBox x:Name="housePlansLB" Margin="0" ItemsSource="{Binding HousePla ...

  2. 关于Java的Properties类

    Properties类 先来学习下Properties类吧. Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. ...

  3. Android——edittext的几个属性

    <EditText android:layout_columnSpan="2" android:hint="To" android:layout_grav ...

  4. 网络打印协议之LPR或RAW

    网络打印端口 标准 TCP/IP 端口监视器 对于连接到网络的打印设备,标准的 TCP/IP 端口监视器就是最佳选择.标准端口监视器增强了LPR(line printer remote,远程行式打印机 ...

  5. TP5 display()

    tp3.x $this->display(); tp5 return $this->fetch();

  6. Install Homebrew

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/instal ...

  7. javascript 图片滚动

    <div style="width:9999px;"> <ul id="marquePic1_1"> <li> <dl ...

  8. powerdesigner与mysql数据库的连接

    (1).在桌面新建一个mysql.dpc文件,里面可以什么内容也没有. (2).打开powerdesigner,操作如下: (3).把mysql.dcp文件选中: (4).建立连接属性: (5).测试 ...

  9. linux下node-webkit安装vlc插件

    一.下载node-webkit 下载linux版本的node-webkit,网址如下:https://github.com/rogerwang/node-webkit.文件解压之后又如下几个文件,其中 ...

  10. Spring中 classpath* 和 classpath 前缀的区别

    // org.springframework.core.io.support.ResourcePatternResolver /** * Pseudo URL prefix for all match ...