链接地址:https://blog.csdn.net/aa792978017/article/details/82939483

Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vue项目。流程如下:

一、安装node.js
  1.进入node.js官网下载相应安装包:https://nodejs.org/en/

安装过程没有什么要注意的地方,直接安装到自己想安装到的目录里面就可以了

2.安装完成以后,打开命令行,输入node -v  来判断是否安装成功

3.在安装node的时候,npm包管理器会自动安装,我们在命令输出 npm -v 看看是否安装成功

4.安装vue-cli脚手架:

二、npm包管理器和vue-cli脚手架来搭建
  1.在D盘先新建一个文件夹用来存放将要新建的项目文件,这里命名为:vue-demo

2.打开命令行工具,然后跟着输入,进入项目目录vue-demo文件

3.接着输入:vue init webpack  然后出现以下后,输入   y(确认在当前目录下建了vue项目)

4.按图片继续输入命令

接着就会自动进行安装

5.安装结束后,我们进入项目目录

6.输入 npm install  安装项目所需要的依赖包,因为npm是去国外网站下载包,所以网络不好的话下载会比较慢

7.输入npm run dev,启动项目

8.接着会出现这个

项目就启动成功了

我们复制上面的网址,打开浏览器访问一下

这样,一个vue项目就搭建成功了,接下来我们看看通过vue-cli安装的vue项目文件目录:

希望这篇博客对大家有所帮助。

我会在下一篇博客里面跟大家讲讲如何用现在比较流行的前端IDE--WebStrom来简单编写这个Vue项目,感兴趣可以也看看。
————————————————
版权声明:本文为CSDN博主「一心憧憬」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/aa792978017/article/details/82939483

搭建vue项目并启动vue项目的更多相关文章

  1. tomcat启动前端项目

    前后端分离项目,前端使用vue,部署启动前端项目可以使用NodeJS,Nginx,Tomcat. *)使用Tomcat部署启动: 1.把vue项目build生成的dist包,放到Tomcat的weba ...

  2. vue项目ide(vue项目环境搭建)

    一.先介绍一下我接下来要做的项目 项目:ide可视化工具 技术应用: Vue2.0(js框架):https://cn.vuejs.org/ ElementUi(饿了吗ui框架基于vue的):http: ...

  3. Vue学习——使用vue-cli搭建一个简单的本地vue项目

    前提 安装好node.js.npm.vue-cli.为什么要先安装这些,建议查看https://www.cnblogs.com/jixue/p/10673875.html,这个对于vue-cli理解很 ...

  4. VSCode 启动 Vue 项目 npm install 报错

    1.  报错后,查看了版本. 查看node版本:node -v 查看npm版本:npm -v 查看Augular版本:ng --version 2.  感觉 Augular CLI版本太低,使用以下方 ...

  5. VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  6. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  7. webstorm 点击右上角运行run 启动vue项目

    点击右上角框 -> 编辑结构 点击加号 新增一个npm项目 前提:node环境已经安装完成,npm包管理器 1.进行定位到项目的路径2.安装依赖包,npm install3.启动服务,npm r ...

  8. 基于Idea从零搭建一个最简单的vue项目

    一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...

  9. Vue电商后台管理系统项目第1天-基本环境搭建&登录功能

    基本环境搭建完成 安装npm包:npm -S i vue vue-router axios element-ui 配置Eslint: 打开设置,搜索Eslint拓展,然后将下面代码覆盖进去即可 { , ...

随机推荐

  1. kill的各种讯号?

    kill 程序 不仅仅只是k掉某个进程, 她还有很多作用和用途. 其实, 这也是linux的程序的一个特点: 一个程序(很多是 命令行的程序), 除了主要的作用外, 还有很多" 重要的, 有 ...

  2. Phaser 源码分析

    Phaser 一个可重用的同步屏障,功能上与 CyclicBarrier 和 CountDownLatch 类似,但是支持更灵活的使用. 把多个线程协作执行的任务划分为多个阶段,编程时需要明确各个阶段 ...

  3. LinkedBlockingQueue 源码分析

    LinkedBlockingQueue LinkedBlockingQueue 是基于链表实现的,可以选择有界或无界的阻塞队列. 队列的元素按照 FIFO 的顺序访问,新增元素添加到队列尾部,移除元素 ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_03-常用API第二部分_第5节 StringBuilder类_1_StringBuilder的原理

    字符串不可变.字符串的缓冲区是可以变的 字符串Sting的底层,被final修饰的不可变的数组 a+b+c最终会产生5个字符串

  5. spring boot配置项profiles active

    结论:通用项配置在applicaton.yml,区别环境配置在application-{profile}.yml中 一直不知道这个参数要不要配,配了有什么用,今天搭一个工程来检验 此项作用:用来区分不 ...

  6. adb之mokey的用法

    monkey是安卓稳定性的测试方向 目录 1.使用格式 2.一般命令 3.分析monkey日志 1.使用格式 monkey的固定使用模式如下:[adb shell] monkey [options] ...

  7. c编程过程中错误笔记-& 理解不深啊!

    写了一个函数,删除数组里面的元素,声明如: int student_delete(int *len, struct student stu[]): 在其内部调用了另一个函数 int student_d ...

  8. [Git] 005 初识 Git 与 GitHub 之分支

    在 GitHub 的 UI 界面使用 Git(多图警告) 1. 建立分支 1.1 点击左上方的 Branch: master,在输入框中填入分支名,再点击下方的 Create branch 1.2 此 ...

  9. 剑指Offer编程题(Java实现)——二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  10. HDU 5945 题解(DP)(单调队列)

    题面: Fxx and game Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) T ...