部署开发环境
安装淘宝镜像
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;
}