部署开发环境

安装淘宝镜像

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

安装webpack

cnpm install webpack -g

安装vue脚手架

cnpm install vue-cli -g

1. 新建vue项目

在硬盘上找一个文件夹放工程用的,在终端中进入该目录

cd 目录路径

根据模板创建项目

//vue init webpack vuedemo01

新建demo,模板为webpack简单版1.0 版本

vue init webpack-simple#1.0 vuedemo01

进入此文件夹,安装项目依赖

cd demo

cnpm install

根据需要安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

cnpm install vue-router vue-resource --save

安装axios   

npm install axios -s

使用:

main.js

import axios from 'axios'

Vue.prototype.$http= axios;

使用scss

cnpm install sass-loader node-sass --save-dev

启动项目

cnpm run dev

2.打开现有工程

进入文件目录

cd admin-v4

安装项目依赖

cnpm install

编译项目

npm run build

运行项目

npm run dev

如果默认端口冲突,可通过项目 /config/index.js 中的port修改。

3.引入插件和库

-1 使用jquery

https://www.cnblogs.com/sxz2008/p/8245282.html

-2 引入swiper

安装swiper3

npm i swiper@3.4.2 -S

加载插件

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

初始化

mounted(): {
var mySwiper = new Swiper('.swiper-container', {})
}

.swiper-container {
  width: 100%;
  height:500px;
}

创建vue项目及引入插件的更多相关文章

  1. 【vue】如何在 Vue-cli 创建的项目中引入 iView

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

  2. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

  3. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  4. Django day32 跨域问题,创建vue项目,axios的使用

    一:跨域问题 1.同源策略(浏览器的安全策略) 只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了 2.cors:只要服务器实现了CORS,就可以 ...

  5. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

  6. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  7. vue — 创建vue项目

    创建vue项目 在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了 ...

  8. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

  9. 使用vue-cli 来创建vue项目

    前置条件 需要安装node环境 安装vue\cli工具 vue\cli官网 传送门 vue-cli 安装node.js nodejs中文网 点击之后会发现这个界面 可以点击下载或者选择其他版本的包,尽 ...

随机推荐

  1. mac的终端运行ifconfig

    lo0:loopback回环地址一般是127.0.0.0,loopback指本地环回接口(或地址),亦称回送地址().此类接口是应用最为广泛的一种虚接口,几乎在每台路由器上都会使用. gif0: so ...

  2. 2019 牛客多校第六场 B Shorten IPv6 Address

    题目链接:https://ac.nowcoder.com/acm/contest/886/B 题目大意 给定一个 128 位的二进制 ip 地址,让你以 16 位一组,每组转成 16 进制,用冒号连接 ...

  3. Codeforces 1159A A pile of stones

    题目链接:http://codeforces.com/problemset/problem/1159/A 题意:初始石头堆石子数未知,求进行 n 次加减操作后,石头堆石子数最小的可能是多少. 思路:正 ...

  4. error C1083: 无法打开包括文件: “ui_roadquery.h”: No such file or directory c:\users\administrator\desktop\g_w_j\04 开发阶段\开发工程\imcshowapp\imcshowapp\roadquery.h 5 1 IMCShowApp

    1.我这里出现的原因是忘记将项目文件添加进入项目中,在项目中右击添加即可

  5. 2-JDK环境变量配置和验证

    背景: 官网下载,默认路径安装,如下图,java目录下有两个文件夹:jdk和jre: 1.计算机 -> 右击 -> 属性 -> 选择左侧的'高级系统设置' 2.高级系统设置 -> ...

  6. extern const 不能一起用

    转载至:https://www.cnblogs.com/herenzhiming/articles/5442893.html 常变量在定义的时候必须初始化,所以当你在a.cpp中定义extern co ...

  7. 【学术篇】SDOI2008 沙拉公主的困惑

    传送门! 题目在这里... 题目大意? 难道不是说的很清楚了么OvO 求n!中与m!互质的数的个数.. 题目分析. 显然的数论... 所以就是化式子呗.. 一个很显然的性质就是如果\(gcd(a,b) ...

  8. Windows中的"簇"和Linux中的"块"是对应的

    扇区是对硬盘而言,块是对文件系统而言. 簇”又称为“分配单元” ,文件系统是操作系统与驱动器之间的接口,当操作系统请求从硬盘里读取一个文件时,会请求相应的文件系统(FAT 16/32/NTFS)打开文 ...

  9. drupal7 代码生成用户,并自动登录

    直接上代码 1. 生成用户(注册) $edit = [ "name" => "name", "pass" => "pa ...

  10. Maven - 深入理解maven构建生命周期和各种plugin插件

    作者:亚当-adam 来源:CSDN 原文:https://blog.csdn.net/zhaojianting/article/details/80321488 版权声明:本文为博主原创文章,转载请 ...