环境搭建: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. KubeCon深度洞察 | KubeEdge开源首秀

    以下内容根据华为云DJ在KubeCon Shanghai Demo Session演讲实录整理而成. KubeEdge Demo Show 11月15日上午Huawei宣布了KubeEdge项目开源, ...

  2. hdu1176免费馅饼(动态规划,数塔)

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. 深入理解java虚拟机学习笔记(二)

    第三章 垃圾收集器与内存分配策略 概述 ​ 程序计数器.虚拟机栈.本地方法栈3个区随线程而生,随线程而灭.因此大体上可认为这几个区域的内存分配和回收都具备确定性.在方法/线程结束时,内存自然就跟着回收 ...

  4. 浪在ACM新春大作战

    题目链接: # Name 补题状态 A Memory and Crow 已补 B Memory and Trident 已补 C Memory and De-Evolution 已补 D Memory ...

  5. Linux内核设计笔记7——中断

    中断与中断处理 何为中断? 一种由设备发向处理器的电信号 中断不与处理器时钟同步,随时可以发生,内核随时可能因为中断到来而被打断. 每一个中断都有唯一一个数字标志,称之为中断线(IRQ) 异常是由软件 ...

  6. Python3 小工具-UDP发现

    from scapy.all import * import optparse import threading import os def scan(ip): pkt=IP(dst=ip)/UDP( ...

  7. Lake Counting(DFS连通图)

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  8. oracle数据库之游标的使用

    一.游标概念 为了处理 SQL 语句,ORACLE 必须分配一片叫上下文( context area )的区域来处理所必需的信息,其中包括要处理的行的数目,一个指向语句被分析以后的表示形式的指针以及查 ...

  9. Java中的线程状态转换和线程控制常用方法

    Java 中的线程状态转换: [注]:不是 start 之后就立刻开始执行, 只是就绪了(CPU 可能正在运行其他的线程). [注]:只有被 CPU 调度之后,线程才开始执行, 当 CPU 分配给你的 ...

  10. lintcode-16-带重复元素的排列

    带重复元素的排列 给出一个具有重复数字的列表,找出列表所有不同的排列. #### 样例 给出列表 [1,2,2],不同的排列有: [ [1,2,2], [2,1,2], [2,2,1] ] 挑战 使用 ...