VUE安装以及基本操作

VUE:
一：vue的环境搭建相关网址：https://www.jianshu.com/p/1626b8643676
1、安装node.js，从node.js官网下载并安装node，一路“下一步” 安装完成
2、win+r 输入cmd打开命令行
3、检查node.js是否安装成功输入node -v 出现版本号则是安装成功
3、安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完成输入cnpm -v出现版本号则安装成功
4、安装webpack 打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，出现相应的版本号，则说明安装成功。
5、安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V，出现相应的版本号，则说明安装成功。
6、创建一个文件夹 cd至此文件夹
7、输入vue init webpack exprice（你所要创建的项目名称，不能使用中文）
8、This will install Vue 2.x version of the template（这里说明将要创建一个vue 2.x版本的项目）
9、Project name (exprice) ---------------------项目名称
10、Project name exprice
11、Project description (A Vue.js project) ---------------------项目描述
12、Project description A Vue.js project
13、Author Datura --------------------- 项目创建者
14、Author Datura
15、Vue build (Use arrow keys)
16、Vue build standalone
17、Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
18、Install vue-router? Yes
19、Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no
20、Use ESLint to lint your code? No
21、Setup unit tests with Karma + Mocha? (Y/n)
22、Setup unit tests with Karma + Mocha? Yes
23、Setup e2e tests with Nightwatch? (Y/n)
24、Setup e2e tests with Nightwatch? Yes
25、CD进创建的项目目录 npm install
26、输入npm run dev 启动项目
二、vue项目引入子组件
<div>
<footercomps ref="footercomps"></footercomps>
</div>
<script>
import footercomps from "../../components/footer.vue";
export default{
components:{
footercomps
}
}
</script>
三、调用子组件的方法
this.$refs.footercomps（上述中ref中的值）.fatherLoginStatus()（方法名）
四、VUE请求后台数据 ##分为两种:一种是vue-resource另外一种是axios
vue-resource: 相关网址：https://www.cnblogs.com/yuzhengbo/p/6714355.html
1、安装vue-resource 打开命令行 cd进所创建的项目输入：npm install vue-resource --save
2、在main.js文件中导入
import VueResource from 'vue-resource'
Vue.use(VueResource)
3、 this.$http({
method: 'JSONP',
headers: {"X-Requested-With": "XMLHttpRequest"},
emulateJSON: true,
emulateHTTP: true,
url: _url,
params: {api_param: param}
}).then(res => {
this.kcListData = res.data;
})
axios: 相关网址：https://www.cnblogs.com/zhouyangla/p/6753673.html
1、安装axios 打开命令行 cd进所创建的项目输入：import axios from 'axios'
2、在main.js文件中导入
Vue.prototype.$http = axios
3、 this.$http({
method: 'post',
url: '/user',
data: {
}
})
五、打包上线资源如：图片引入失败、资源引入失败
解决方案：
1、打开config文件夹下方的index.js文件修改module.exports下方的assetsPublicPath为./
2、打开build文件夹下方的utils.js 在fallback: 'vue-style-loader'下方增加publicPath: '../../'
六、配置路由： ##router文件夹下方的index.js文件
import index from '@/components/index.vue'
export default new Router({
//mode:'history',
routes: [
{name: 'index',path: '/index',component: index},
]
})
七、去除掉链接上的#号
打开router文件夹下方的index.js文件
在routers:[]上方增加：mode:"history"
注意：此模式虽然能去除#号但是刷新页面会出现404 详情请看相关文档：http://www.jb51.net/article/119075.htm
八、获取链接上的传参：
例如：http://www.yewen1001.com/#/groups?groups_id=127201
使用：this.$route.query.groups_id
九、Vue中的A链接跳转
<router-link :to='{path:"/index",query:{key:value}}'></router-link>
十、使用vue自带的vue-video-player播放器：
相关文档：https://jsfiddle.net/u69gnx90/
https://github.com/surmon-china/vue-video-player/blob/master/examples/01-video.vue
https://www.jianshu.com/p/e8e747e33ef0
十一、修改网页title
document.title='课程列表';
十二、vue项目打包上线：
1、打开命令行 CD进项目目录
2、输入：npm run build
3、在项目文件夹下方生成一个dist文件将此文件上传至服务器即可（外面的dist文件夹可要可不要）
十三、vue的相关插件文件可以访问网址：http://element.eleme.io/#/

VUE安装以及基本操作相关推荐

Vue安装配置以及入门案例
Vue Vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不 ...
python numpy库安装-Python Numpy库安装与基本操作示例
本文实例讲述了Python Numpy库安装与基本操作.分享给大家供大家参考,具体如下: 概述 NumPy(Numeric Python)扩展包提供了数组功能,以及对数据进行快速处理的函数. NumP ...
Vue安装依赖npm install时报错问题解决方法
一.用到的一些快捷键: a.打开cmd: win+R b.进入d盘:d: c.进入d盘某个文件夹:cd myVue d.退回上一级:cd.. 二.Vue安装工作: 1.vue的安装依赖于node. ...
分子结构模拟工具UCSF Chimera的安装及基本操作
UCSF Chimera是一个用于分子结构和相关数据的交互式可视化和分析工具.主要包括:密度图,超分子组合,顺序排列,对接结果,轨迹和构象整合.也可以生成高质量图像和动画. 软件下载 UCSF Chi ...
mac连接局域网mysql_MySQL for Mac 安装和基本操作
MySQL for Mac 安装和基本操作一.安装mysql 1.mysql下载地址http://dev.mysql.com/downloads/mysql/我的机器是mac 10.8的;所以使用m ...
Vue安装与IDE HBuilder安装（一分钟读懂）
Vue安装与IDE安装(一分钟读懂) 官网下载IDE HBuilder 解压该文件后,打开官网下载vue.js 创建demo文件夹,把vue.js放进这里面并且创建index.html文件然后把这 ...
Vue系列（2）：Vue 安装
前言:关于页面上的知识点,如有侵权,请看这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好大家都知道,学 Vue 最好还是去官网学,官网写 ...
系统讲解Azkaban安装及基本操作实用篇
一,概述 1.1什么是 Azkaban Azkaban是由Linkedin公司推出的一个批量工作流任务调度器,主要用于在一个工作流内以一个特定的顺序运行一组工作和流程,它的配置是通过简单的key:va ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...

VUE安装以及基本操作

VUE安装以及基本操作相关推荐

最新文章

热门文章