美文网首页
如何搭建一个Vue项目

如何搭建一个Vue项目

作者: 方_圆 | 来源:发表于2020-11-10 15:28 被阅读0次


一。在搭建前,首先检查自己的搭建环境

    使用cmd,打开命令行,使用node -v指令,查看自己的node版本(是否安装)

    使用npm -v指令,查看自己的npm版本(是否安装)

二。搭建Vue项目环境

在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:

在命令行,cd 目录路径 (进到该工程文件下)

如果已经安装了git,则在该工程文件下右击,选择Git Bush Here

1、全局安装vue-cli

安装vue脚手架输入指令:vue init webpack 1111。(这里的“1111” 是项目名称,可以自己取名字,但是不可以用中文。)

2.点击回车以后,填写相关提示(名字,项目描述,作者,等等),然后一直回车或者yes,就创建一个基于 webpack 模板的新项目

3.回到刚才的工程文件下,就会有项目录了

4.打开Visual Studio Code软件,选择文件,打开文件夹,选择打开刚才的项目工程文件夹1111,接下来咱们的Visual Studio Code软件左边项目管理器中,就会有项目目录结构了

5.一般咱们的项目页面文件都在src/components/自己命名的一些vue文件

6.项目目录结构中router/index.js。这个文件里面配置相关路由信息,

三。需要执行该项目的话,点击Visual Studio Code软件上方的,新建终端,

1.输入指令npm i,安装相关依赖,

安装完成依赖后,左边项目管理器中,多出了一个node _modules文件,不用管,就可以了

2.最终,在终端命令行输入 npm run dev 指令回车,运行咱们的项目就行啦,运行完成后,把把网址粘贴到浏览器中就可以了。

四。就OK啦。

相关文章

  • 【美团网项目】2.Vue基础知识

    知识点 环境搭建(如何快速搭建 Vue 环境 / 创建一个 Vue 项目) 模板语法 计算属性 类与样式 条件&列...

  • 如何运行vue项目

    如何运行vue项目vue-clinpmnode.js vue.js如何打开已有的项目。自已折腾了一下,成功搭建好项...

  • VUE学习之路一 项目搭建

    脚手架搭建vue项目框架 CLI3项目搭建查看 搭建方案 vue-cli 是一个官方发布 vue.js 项目脚手...

  • vue-cli3.0搭建与配置

    vue-cli3.0搭建与配置 如何新建项目 使用 npm 全局安装 vue-cli : 创建项目执行: 选择项目...

  • Vue-cli项目搭建(axios vue-router vue

    之前有写过如何用vue-cli搭建一个项目,现在我们来将这个项目的基本构架搭建出来。例如如何使用vuex 和 ax...

  • Vue(一)vue-cli搭建Vue项目

    vue项目搭建 vue项目快速搭建工具——vue-cli vue-cli是基于node环境的一个命令行工具。也就是...

  • VUE 搭建过程

    如何搭建一个vue项目(完整步骤)[https://www.cnblogs.com/haitaoli/p/1030...

  • 【Vue3.0】- 入坑 - 全家桶

    本文主要内容基于 vue-cli 快速搭建 Vue 3.0 项目 快速搭建 Vue 3.0 项目 版本 升级vue...

  • 搭建Vue-TypeScript项目(一)

    搭建Vue-TypeScript项目(一) 这是一个系列文章,一步步搭建vue项目,包含vue-cli3,axio...

  • vue2.0 创建全局组件

    vue2.0 创建全局组件 首先先搭建一个vue-cli项目 搭建后的项目目录 在components文件...

网友评论

      本文标题:如何搭建一个Vue项目

      本文链接:https://www.haomeiwen.com/subject/wnwgsctx.html