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

一、前言

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

• 下载地址：https://nodejs.org/en/
• 官网页面展示

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项目-环境和项目搭建的概述，之后会陆续更新后面的模块，包括后端代码，带大家手码项目，提升自己的编码能力。

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