从0开始写Vue项目-环境和项目搭建

45 篇文章 9 订阅
36 篇文章 61 订阅

一、前言

1.什么是Vue

 在我们了解Vue之前,我们来看看官网的说明:

  1. Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)
  2. Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

2.介绍与描述

  1. 动态构建用户界面的渐进式JavaScript框架

  2. 作者:尤雨溪

3.Vue的特点

  1. 遵循MVVM模式

  2. 编码简洁,体积小,运行效率高,适合移动/PC端开发

  3. 它本身只关注UI,可以引入其它第三方库开发项目

4.与其他JS框架的关联

  1. 借鉴 Angular 的模板和数据绑定技术
  2. 借鉴 React 的组件化和虚拟DOM技术

5.Vue周边库

  • vue-cli:vue脚手架
  • vue-resource
  • axios
  • vue-router:路由
  • vuex:状态管理
  • element-ui:基于vue的UI组件库(PC端)

扩充--

关于axios

官网:https://www.axios-http.cn/

二、环境准备

1.安装node.js

2.检查node.js版本

  • 查看版本的两种方式

    node -v
    node --version

3.为了提高我们的效率,可以使用淘宝的镜像源

  • 输入:npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 以后再用到npm的地方直接用cnpm来代替就好了,因为没有镜像源的话,安装速度比较慢
  • 检查是否安装成功
cnpm -v

三、搭建vue环境

1、全局安装vue-cli

  • 这里注意:安装vue-cli对node.js的版本是有要求的

在这里插入图片描述

  • 装的两种方式:输入cmd命令
npm install -g @vue/cli //这个是从国外下载的比较慢
cnpm install -g @vue/cli //这个是从镜像源下载
  • 查看安装的版本(显示版本号说明安装成功)
vue --version

 

四、搭建Vue项目

1.新建一个文件夹

然后进入文件夹里面,在存储位置输入cmd

2.创建项目

(1)使用vue create 项目名称

(2)创建好项目之后我们进行配置

选择 Manually select features

按enter之后选择以下配置

        我们用空格键来执行选择和取消的操作,我们选择的分别是Router、VueX取消我们的Linter/Formatter

然后选择我们的Vue2.0版本

按enter键之后选择N,然后我们选择 In package.json 

继续enter之后仍然选择N

然后我们就可以等待项目的创建了

        创建完成之后,我们在下面输入cd+项目名称,也可以直接输入cd,然后按一下Tab键,就可以直接跳到项目去了 ,然后继续输入我们的 npm run serve 来启动我们创建的Vue项目

项目正在启动:

        启动完成之后,我们会发现生成了一个路径,然后就可以打开浏览器,输入路径,就可以看见我们启动之后的项目了

五、开发工具运行Vue项目

        我们在之前创建项目的终端输入Ctrl + C 关闭项目,也可以直接关闭终端,然后拖动我们存放项目的文件夹到开发工具,用开发工具来打开我们的项目,我这里使用的是IDEA来运行项目

打开我们的项目之后,我们点击上面的添加配置

添加配置完成后,出现如图的效果,我们点击运行项目

当我们看见出现路径的时候,就说明我们启动项目成功了

 然后我们点击路径,就会出现跟之前一样的页面了

六、修改运行路径(可跳过此操作)

PS:执行此操作是因为自己已经有过路径为http://localhost:8080/的项目了,是为了区分项目才进行修改的

        在我们的项目里面找到我们的vue.config.js,然后用以下代码替换之前的代码,然后再点击运行,就会生成自己设置的路径

module.exports = {
  devServer: {                //记住,别写错了devServer//设置本地默认端口  选填
    port: 9999,
  }
}

⛵小结

        以上就是对从0开始写Vue项目-环境和项目搭建的概述,之后会陆续更新后面的模块,包括后端代码,带大家手码项目,提升自己的编码能力。

        如果这篇文章有帮助到你,希望可以给作者点个赞👍,创作不易,如果有对后端技术、前端领域感兴趣的,也欢迎关注 ,我将会给你带来巨大的收获与惊喜💝💝💝!

  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沙漠真有鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值