环境搭建:mac+nodejs+npm

#安装node.js :                      $ brew install node
#安装vue-cil: $ npm install -g vue-cli
注:
官网下载安装node.js:https://nodejs.org/en/mac-使用brew安装软件

优化:

使用国内镜像提升下载速度:
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    $ cnpm install -d
安装 nrm 自由切换 npm 源 $ cnpm install nrm
使用nrm:
    $ nrm ls
    $ nrm use **

构建项目:

安装vue                $ npm install vue@2.1.
全局安装 vue-cli $ npm install --global vue-cli
创建新项目 $ vue init webpack my-project
进入项目目录 $ cd my-project
注:主要用的包都在package.json文件中
安装依赖 $ npm install
注:会发现多了一个node_modules目录,,里面就是项目依赖包资源
运行项目 $ npm run dev
打包项目       $ npm run build
测试打包项目:
  安装一个 http-server 服务 $npm install http-server -g
   使用:cd dist     http-server -p 3000

注意:

去掉打包时生成的 map 文件:将 /config/index.js 文件修改为:productionSourceMap: false

 

安装组件:

安装 vue 路由模块      $ npm install vue-router -D
安装网络请求模块 $ npm install vue-router vue-resource --save
支持scss 文件预编译
            $ npm install sass-loader -D
             $ npm install node-sass -D
支持jquery $ npm install --save jquery
安装一个ajax接口请求工具 $ npm install axios -D

Vue项目搭建过程的更多相关文章

  1. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  2. Vue项目搭建流程 以及 目录结构构建

    Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...

  3. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  4. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  5. vue项目搭建 (一)

    vue项目搭建 (一) 由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以 ...

  6. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  7. vue项目搭建介绍02

    目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...

  8. 利用vue-cli3快速搭建vue项目详细过程

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  9. vue企业项目搭建过程(vue-cli脚手架超详细教程 傻瓜-入门)

    vue作为现在主流的前端框架,有必要学习一下. vue的官方文档还是不错的,开源中文,一个爽字形容. 如果不是实际开发需要vue-cli构建项目,那么可以在加一个爽. 然而要构建的时候发现官方文档还是 ...

随机推荐

  1. JavaWeb——JavaWeb开发入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

  2. ThinkDev.Data更新日志

    2013-09-29 10:001.重构Where.And.Or.Having.JoinTable代码,新增条件组合查询QueryGroup2.1.1.2.0 2013-09-04 09:001.修复 ...

  3. cf#516A. Make a triangle!(三角形)

    http://codeforces.com/contest/1064/problem/A 题意:给出三角形的三条边,问要让他组成三角形需要增加多少长度 题解:规律:如果给出的三条边不能组成三角形,那答 ...

  4. Java开发工程师(Web方向) - 04.Spring框架 - 第1章.Spring概述

    第1章.Spring概述 Spring概述 The Spring Framework is a lightweight solution and a potential one-stop-shop f ...

  5. 一段代码-Java

    在打算写这么一篇文章的时候,想到很多,觉得要是全都写下来的话,估计BZ也不知道要写多少,总之,好多吧!那么,就让BZ一切从简... 我们知道java它的特殊性在于,用它所写代码的运行是依靠自己的一套j ...

  6. fastCMS八大核心对象

    fastCMS内置system对象,该对象包含八大核心对象,应用于不同的操作场景,分别是: 1.system.string 对象(处理字符类操作) 2.system.number 对象(处理数字类操作 ...

  7. oracle 学习随笔一: 字段大小写

    字段上加大小写:"reportId"  即可

  8. commons-lang源码解析之StringUtils

    apache的commons工具包是平时使用最多的工具包之一,对其实现方式需要具体了解.commons-lang version 3.1 empty和blank的区别 StringUtils中判断St ...

  9. 日历(Calendar)模块

    #usr/bin/python3 #! -*-conding : utf-8 -*- #2018.3.14 """ 日历(Calendar)模块 此模块的函数都是日历相关 ...

  10. Struts2文件上传带进度条,虽然不是很完美

    好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...