创建vue项目及引入插件
部署开发环境
安装淘宝镜像
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项目及引入插件的更多相关文章
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
- 使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...
- Django day32 跨域问题,创建vue项目,axios的使用
一:跨域问题 1.同源策略(浏览器的安全策略) 只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了 2.cors:只要服务器实现了CORS,就可以 ...
- MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...
- 如何创建vue项目
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- vue — 创建vue项目
创建vue项目 在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了 ...
- 使用vue-cli脚手架创建vue项目
使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...
- 使用vue-cli 来创建vue项目
前置条件 需要安装node环境 安装vue\cli工具 vue\cli官网 传送门 vue-cli 安装node.js nodejs中文网 点击之后会发现这个界面 可以点击下载或者选择其他版本的包,尽 ...
随机推荐
- [转]WinForm DataGridView 绑定泛型List(List<T>)/ArrayList不显示的原因和解决
背景:无意间遇到了一个不大不小的问题,希望对一些遇到的人有所帮助! 一.问题 WinForm DataGridView 绑定泛型List (List<T>)/ArrayList不显示,UI ...
- 4.8 this关键字
/** * 测试this * @author Hank * */ /* 创建一个对象分为如下四步: 1.分配对象空间,并将对象成员变量初始化为0或空 2.执行属性值的显示初始化 3.执行构造方法 4. ...
- 【POJ】1860 Currency Exchange
真是气skr人..没把d[]换成double...de了一上午的bug// 记得用G++提交啊 题目链接:http://poj.org/problem?id=1860 题意:告诉你n个点,m条路.起始 ...
- VB.NET利用正則表達式巧妙限制字符输入
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010028869/article/details/37913867 在通常的程序设计中.对 ...
- startup_stm32f10x_xx.s 启动代码文件选择
引用http://blog.csdn.net/gasbi/article/details/7545568 整体感觉stm32给的库文件太琐碎了,正如它的芯片型号一样繁多,例如启动文件: 网上查到的各个 ...
- Ansible的copy模块批量下发文件
copy模块的参数,ansible 主机组 -m copy -a '' src: 指定源文件或目录 dest: 指定目标服务器的文件或目录 backup: 是否要备份 owner: 拷贝到目标服务器后 ...
- 【笔记篇】单调队列优化dp学习笔记&&luogu2569_bzoj1855股票交♂易
DP颂 DP之神 圣洁美丽 算法光芒照大地 我们怀着 崇高敬意 跪倒在DP神殿里 你的复杂 能让蒟蒻 试图入门却放弃 在你光辉 照耀下面 AC真心不容易 dp大概是最经久不衰 亘古不化的算法了吧. 而 ...
- 关于soapui如何做安全测试
1.首先安装soapui5.1.2 第一步:运行SoapUI-Pro-x32-5.1.2_576024.exe文件,按照步骤安装成功: 第二步:拷贝Protection-4.6.jar到soapui安 ...
- 暑假集训test-8-14~8-15
我不想写博客辣. 拖了三天的一起写,结果就是写不下去了...果然应该改一道写一道么.. 题面题解代码也懒得往博客上放了,屯U盘里了... 因为太菜还有两道没有改. 题解外的一些参考: lyc大佬的进程 ...
- python处理多线程之间事件通讯方法
一.什么是事件 每执行一个事情,肯定有该事情的执行后状态,那事件就是该事情发生的信号 在程序中,多线程之间需要通讯,而事件就是方便线程之间的通讯 案例: 1.服务器启动需要5秒 2.客服端启动后去链接 ...