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,让我们的代码看起来更顺畅美观!

如果加个<router-link to="/">Home</router-link>则会跳到路由/也就是首页去!
题外话:添加依赖包只需npm i xxxx --save-dev 即可
使用代理axios代理,先安装axios,然后
在mainjs里添加

index.js 添加代理路径

然后在开发配置dev.env.js里添加

然后

that.$axios.get("/face/xxx/xxx/xxx").then(res=>{},error=>{});

OK结束!

vue这个东西比较偏界面画,以前做游戏比较偏代码化,所以转过来还是会有点麻烦,但是我不怕,打死我也不怕!

因为天空是蓝色的,而地狱是黑色的,我想要天空的蔚蓝!

vue环境搭建及简单接触的更多相关文章

  1. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  2. 55.Vue环境搭建

    Vue环境搭建 在搭建过程中出现的错误解决办法  https://www.cnblogs.com/lovebing/p/9488198.html      cross-env使用笔记   cross- ...

  3. android Jni NDK开发环境搭建及其简单实例的编写

    android  Jni  NDK开发环境搭建及其简单实例的编写 由于工作需要,需要采用开发想要的JNI,由于之前没有接触过安卓的开发,所以更加网上的帖子,学习了下.遇到了些问题,然后总结下学习过程中 ...

  4. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

  5. Vue环境搭建及第一个helloWorld

    Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置  https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...

  6. 前端(二十三)—— Vue环境搭建

    目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...

  7. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  8. Django开发web环境搭建的简单方法(CentOS6.5环境)

    这几天跟Linux下的Python + Django环境搭建卯上了.经过几天的琢磨,找到了一条自己认为给力的路径. 这里给出命令行,过程如下: 首次登陆,切换管理员: [web@bogon ~]$ s ...

  9. 【SSH】 之 Struts2环境搭建及简单应用开发

    在上一篇文章中,我们一起了解了一下struts2的工作机制原理,接下来让我们进行一下简单应用的开发 (一)配置环境 1.建立web项目 2.导入jar包 其中struts2中有很多jar包,我们不需要 ...

随机推荐

  1. 走近kafka-文件存储

    过期的数据才会被自动清除以释放磁盘空间.比如我们设置消息过期时间为2天,那么这2天内的所有消息都会被保存到集群中,数据只有超过了两天才会被清除. Kafka只维护在Partition中的offset值 ...

  2. 使用winsw包装服务将nginx包装为Windows服务

    **Nginx本身在Windows上并不支持以服务的形式运行,官方文件中有提到.http://nginx.org/en/docs/windows.html,所以在Windows下使用winsw将Ngi ...

  3. 题解 洛谷P1311 【选择客栈】

    可能这做法是最奇葩的ST表 我们枚举k,计算每种色调的客栈各有多少种方法  我们利用一种奇怪的思想:除了不可行的,剩下的都是可行的 所以我们先求出 每种颜色的客栈随机选择两个,一共有多少种结果 接着减 ...

  4. 【xlwings】 wps 和 office 的excel creat_sheet区别

    最近在学习 xlwings,参考学习的网址:https://www.jianshu.com/p/b534e0d465f7 写得很棒,学到了很多. 在新建sheet表单, 发现一个问题. import ...

  5. 单档——PK单号新增、修改时不允许编辑,PK单号自动生成

    由系统自动生成单号(日期+流水),用户新增.修改时不允许编辑单号: 范例(cxmt631): 1)在#单头栏位开启设定#中,即 cxmt631_set_entry(p_cmd)下: #add-poin ...

  6. zabbix-自定义告警(二)

    实现自定义监控 文章引用:https://www.cnblogs.com/clsn/p/7885990.html#auto_id_28 一.实现自定义监控 说明zabbix自带模板Template O ...

  7. Asp.net core Identity + identity server + angular + odata + 权限管理

    今天踩了一个坑. 网站发布后看到了一个 error Refused to execute inline script because it violates the following Content ...

  8. js页面加载时候的调用函数的方法

    方法一:jquery 中:$(function(){}) 括号内写你的内容 方法二:html <body onload=''> <script type="text/jav ...

  9. 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 ...

  10. JavaWeb【一、简介】

    原计划上周完成的内容,硬是过了一个清明拖到了这周,工作上还有很多东西没做...明天抓紧看把,争取这周末搞定 内容简介:(学习完后会重新梳理调整) 1.JavaWeb[一.简介] 2.JavaWeb[二 ...