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

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

一、前言

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
    评论
要使用 Vite 从零开始搭建 Vue 3 开发环境,你需要按照以下步骤进行操作: 1. 首先,安装 Node.js 和 npm。你可以从 Node.js 官网下载最新版本的 Node.js。 2. 在你的项目文件夹中,使用以下命令初始化一个新的 npm 项目: ``` npm init -y ``` 3. 安装 Vite 和 Vue 3: ``` npm install vite vue@next --save-dev ``` 4. 在项目文件夹中创建一个名为 `index.html` 的文件,并将以下代码添加到文件中: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue 3 Vite Demo</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` 5. 在项目文件夹中创建一个名为 `src` 的文件夹,并在其中创建一个名为 `main.js` 的文件。将以下代码添加到文件中: ```js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app'); ``` 6. 在 `src` 文件夹中创建一个名为 `App.vue` 的文件,并将以下代码添加到文件中: ```html <template> <div> <h1>Hello, {{ name }}!</h1> <p>This is a Vue 3 Vite demo.</p> </div> </template> <script> export default { name: 'App', data() { return { name: 'World', }; }, }; </script> ``` 7. 在终端中使用以下命令启动 Vite: ``` npx vite ``` 8. 在浏览器中打开 http://localhost:3000,你应该能够看到一个显示 "Hello, World!" 的页面。 现在你的 Vue 3 Vite 开发环境已经准备好了!你可以在 `App.vue` 中添加更多的 Vue 3 代码,并在浏览器中实时查看结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

沙漠真有鱼

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

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

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

打赏作者

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

抵扣说明:

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

余额充值