vue环境搭建及简单接触
1、安装node环境
首先官网安装nodejs,下载地址https://nodejs.org/en/
很多情况下,npm i 命令安装的包都是要科学上网的,或者就是国际网,下载速度很慢,不过有个淘宝镜像可以使用
npm install -g cnpm -registry-https://registry.npm.taobao.org命令安装
2、搭建vue项目环境
首先安装vue-cli
npm install --global vue-cli
进入项目目录,输入命令
vue init webpack vue-demo
回车就会有提示信息之类的,直接回车-----,中间要安装一些包,建议安装,最后你会发现项目的目录出现下面的项目结构
继续npm i或者cnpm i 安装依赖库
然后npm run dev 回车
浏览器打开地址就会看到我们的第一个vue项目创建成功了。
3、vue项目简介(你能明显的看到这是复制过来的)
1、build:构建脚本目录
1)build.js ==> 生产环境构建脚本;
2)check-versions.js ==> 检查npm,node.js版本;
3)utils.js ==> 构建相关工具方法;
4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;
5)webpack.base.conf.js ==> webpack基本配置;
6)webpack.dev.conf.js ==> webpack开发环境配置;
7)webpack.prod.conf.js ==> webpack生产环境配置;
2、config:项目配置
1)dev.env.js ==> 开发环境变量;
2)index.js ==> 项目配置文件;
3)prod.env.js ==> 生产环境变量;
3、node_modules:npm 加载的项目依赖模块
4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
2)components:组件目录,我们写的组件就放在这个目录里面;
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
4)App.vue:根组件;
5)main.js:入口js文件;
5、static:静态资源目录,如图片、字体等。不会被webpack构建
6、index.html:首页入口文件,可以添加一些 meta 信息等
7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
8、README.md:项目的说明文档,markdown 格式
9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等
4、开始第一个vue项目
1、在components文件夹下创建一个views目录
2、在views下创建一个First.vue
3、在router目录下的index.js里配置路由路径
4、新建sub目录,并在其下新建Confirm.vue文件
全程如下:
First.vue
<template>
<div class='first-app'>
{{msg}}
<confirm text="注册" v-on:message="getMessage"></confirm>
</div>
</template>
<script>
import Confirm from '../sub/Confirm'
export default {
name:"First",
components:{
Confirm
},
data(){
return {
msg:"你好 你好"
}
},
methods:{
getMessage(val){
alert(val);
}
}
}
</script>
Confirm.vue
<template>
<div class='confirm-button'>
<button v-on:click='getButtonClick'>{{text||'确认'}}</button>
</div>
</template>
<script>
export default {
name:"confirm-button",
props:["text"],
data(){
return {
msg:true
}
},
methods:{
getButtonClick(){
this.$emit("message",this.msg);
}
}
}
</script>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/views/First' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/first',
name: First,
component: First
}
]
})
保存下,刷新,点击注册我们会看到
明显的复制的,自己亲手写一遍,方便记忆,本次转前端,真的好难啊!
vue模板文件:
template 写 html,script写 js,style写样式
注意刚开始可能会报语法错误什么的,建议曲线ESLint,这个是语法检查的,麻烦!
如果用VSCode写项目,我们可以安装vue的高亮支持Vetur,让我们的代码看起来更顺畅美观!

index.js 添加代理路径
然后在开发配置dev.env.js里添加
然后
that.$axios.get("/face/xxx/xxx/xxx").then(res=>{},error=>{});
OK结束!
vue这个东西比较偏界面画,以前做游戏比较偏代码化,所以转过来还是会有点麻烦,但是我不怕,打死我也不怕!
因为天空是蓝色的,而地狱是黑色的,我想要天空的蔚蓝!
vue环境搭建及简单接触的更多相关文章
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
- 55.Vue环境搭建
Vue环境搭建 在搭建过程中出现的错误解决办法 https://www.cnblogs.com/lovebing/p/9488198.html cross-env使用笔记 cross- ...
- android Jni NDK开发环境搭建及其简单实例的编写
android Jni NDK开发环境搭建及其简单实例的编写 由于工作需要,需要采用开发想要的JNI,由于之前没有接触过安卓的开发,所以更加网上的帖子,学习了下.遇到了些问题,然后总结下学习过程中 ...
- Node.js 环境搭建及简单应用
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...
- Vue环境搭建及第一个helloWorld
Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置 https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...
- 前端(二十三)—— Vue环境搭建
目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...
- Vue环境搭建、创建与启动、案例
vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...
- Django开发web环境搭建的简单方法(CentOS6.5环境)
这几天跟Linux下的Python + Django环境搭建卯上了.经过几天的琢磨,找到了一条自己认为给力的路径. 这里给出命令行,过程如下: 首次登陆,切换管理员: [web@bogon ~]$ s ...
- 【SSH】 之 Struts2环境搭建及简单应用开发
在上一篇文章中,我们一起了解了一下struts2的工作机制原理,接下来让我们进行一下简单应用的开发 (一)配置环境 1.建立web项目 2.导入jar包 其中struts2中有很多jar包,我们不需要 ...
随机推荐
- 走近kafka-文件存储
过期的数据才会被自动清除以释放磁盘空间.比如我们设置消息过期时间为2天,那么这2天内的所有消息都会被保存到集群中,数据只有超过了两天才会被清除. Kafka只维护在Partition中的offset值 ...
- 使用winsw包装服务将nginx包装为Windows服务
**Nginx本身在Windows上并不支持以服务的形式运行,官方文件中有提到.http://nginx.org/en/docs/windows.html,所以在Windows下使用winsw将Ngi ...
- 题解 洛谷P1311 【选择客栈】
可能这做法是最奇葩的ST表 我们枚举k,计算每种色调的客栈各有多少种方法 我们利用一种奇怪的思想:除了不可行的,剩下的都是可行的 所以我们先求出 每种颜色的客栈随机选择两个,一共有多少种结果 接着减 ...
- 【xlwings】 wps 和 office 的excel creat_sheet区别
最近在学习 xlwings,参考学习的网址:https://www.jianshu.com/p/b534e0d465f7 写得很棒,学到了很多. 在新建sheet表单, 发现一个问题. import ...
- 单档——PK单号新增、修改时不允许编辑,PK单号自动生成
由系统自动生成单号(日期+流水),用户新增.修改时不允许编辑单号: 范例(cxmt631): 1)在#单头栏位开启设定#中,即 cxmt631_set_entry(p_cmd)下: #add-poin ...
- zabbix-自定义告警(二)
实现自定义监控 文章引用:https://www.cnblogs.com/clsn/p/7885990.html#auto_id_28 一.实现自定义监控 说明zabbix自带模板Template O ...
- Asp.net core Identity + identity server + angular + odata + 权限管理
今天踩了一个坑. 网站发布后看到了一个 error Refused to execute inline script because it violates the following Content ...
- js页面加载时候的调用函数的方法
方法一:jquery 中:$(function(){}) 括号内写你的内容 方法二:html <body onload=''> <script type="text/jav ...
- flutter: Another exception was thrown: Navigator operation requested with a context that does not include a Navigator.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends State ...
- JavaWeb【一、简介】
原计划上周完成的内容,硬是过了一个清明拖到了这周,工作上还有很多东西没做...明天抓紧看把,争取这周末搞定 内容简介:(学习完后会重新梳理调整) 1.JavaWeb[一.简介] 2.JavaWeb[二 ...