创建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中文网 点击之后会发现这个界面 可以点击下载或者选择其他版本的包,尽 ...
随机推荐
- python数据结构之二叉树的统计与转换实例
python数据结构之二叉树的统计与转换实例 这篇文章主要介绍了python数据结构之二叉树的统计与转换实例,例如统计二叉树的叶子.分支节点,以及二叉树的左右两树互换等,需要的朋友可以参考下 一.获取 ...
- Android Telephony分析(二) ---- RegistrantList详解
前言 本文主要讲解RegistrantList的原理,以及如何快速分析RegistrantList相关的代码流程.在Telephony模块中,在RIL.Tracker(ServiceStateTrac ...
- Xtrabackup 热备
Xtrabackup介绍Xtrabackup是由percona开源的免费数据库热备份软件,它能对InnoDB数据库和XtraDB存储引擎的数据库非阻塞地备份(对于MyISAM的备份同样需要加表锁):m ...
- 17-MySQL-Ubuntu-数据表的查询-分页(六)
分页(limit) 注: (1)limit位于SQL语句的最后面; (2)limit 2; 2表示查询前两条数据; (3)limit 0,2; 0表示查询第1页的起始数据的下标,2表示每页有两条数据 ...
- EFCore学习记录笔记
1:连接slqlocaldb数据库 (1)在CMD下可以输入sqllocaldb info 查看本机安装的所有的localdb实例 (2)数据库连接字符串为:“Server=(localdb)\\MS ...
- 解决OCX 在 非开发电脑上注册出错的问题
这几天遇到一个问题,就是在我自己电脑上开发的OCX 放在其他电脑上居然注册失败,管理员运行也不行,老是会蹦出这样的错误,最后呢终于让我找到一个线索就是在开发电脑上可以安装,在无开发环境上很大概率安装失 ...
- log-slave-updates参数
从库做为其他从库的主库时 log-slave-updates参数是必须要添加的,因为从库要作为其他从库的主库,必须添加该参数.该参数就是为了让从库从主库复制数据时可以写入到binlog日志,为什么要用 ...
- MySQL入门基础知识
1.MySQL环境变量的配置 操作数据库时,要进入bin目录,如下: 但是如果进行配置环境变量,就不必切换路径,如下图所示,即使没有在G:\mysql-8.0.16-winx64\bin下,数据库依然 ...
- linux 服务器安装php5.6
查看原有的php版本:php -v 如果已经装了低版本的php,为了避免冲突,查看: yum list installed | grep php 删除:自行百度吧.可能不能一次性全部删除,只能一个一个 ...
- tomcat的webapps下面包含五个自带的项目
1.docs tomcat的介绍和操作文档等 2.examples 小程序示例 3.host-manager host管理 4.manager(重点) 进行 Server Status 和 Appli ...