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. [HAOI2010]软件安装 题解

    题面 这道题比较显然地,是一道树形背包: 但是会有环,怎么办呢? 缩点!tarjan缩点! 然后在新图上跑树形背包就可以AC了 #include <bits/stdc++.h> #defi ...

  2. Java New IO

    1.NIO介绍 应用程序中,通常会涉及两种类型的计算:计算密集型和I/O密集型.对多数应用来说,花费在等待IO上的时间是比较大的.因此提高IO操作效率对应用的性能至关重要. 面向流的IO系统一次处理一 ...

  3. MySQL mysql-5.7.21-winx64.zip安装指南

    一.下载mysql-5.7.21-winx64.zip压缩包 二.解压 1.在目录mysql-5.7.21-winx64下新建data文件夹 !!!如果已经存在data文件夹,请删除其中ib_logf ...

  4. 《深入实践C++模板编程》之一——Hello模板

    1.通过一个简单的例子来理解模板的用途: 模板为不同类型的数据生成操作相同或相似的函数. 弱语言如Python,可以使用一种函数来应对各种类型,但是C++就不得不为不同的类型编写相似的函数.模板的作用 ...

  5. centos7.4 安装 .net core 2.2

    Step 1:首先注册Microsoft签名密钥,每台机器注册一次就行. sudo rpm -Uvh https://packages.microsoft.com/config/rhel/7/pack ...

  6. O052、Create Volume 操作 (Part III)

    参考https://www.cnblogs.com/CloudMan6/p/5617980.html       Jun 20 17:15:56 DevStack-Rocky-Compute-22 c ...

  7. 5 java 笔记

    1  建议不要在循环体内修改循环变量的值 2 java语言没有提供goto语句来控制程序的跳转 2 java语言同样也提供了continue和break关键字来控制程序的循环结构 3 java中的标签 ...

  8. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  9. JQuery 判断复选框是否选中

    $("input").attr("checked") == "checked" or "undefined" $(&qu ...

  10. 查看磁盘空间,Android各目录讲解

    dfFilesystem Size Used Free Blksize/dev 2.0G 116.0K 2.0G 4096----------包含了所有Linux系统中使用的外部设备/sys/fs/c ...