搭建vue项目并启动vue项目
链接地址: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项目的更多相关文章
- tomcat启动前端项目
前后端分离项目,前端使用vue,部署启动前端项目可以使用NodeJS,Nginx,Tomcat. *)使用Tomcat部署启动: 1.把vue项目build生成的dist包,放到Tomcat的weba ...
- vue项目ide(vue项目环境搭建)
一.先介绍一下我接下来要做的项目 项目:ide可视化工具 技术应用: Vue2.0(js框架):https://cn.vuejs.org/ ElementUi(饿了吗ui框架基于vue的):http: ...
- Vue学习——使用vue-cli搭建一个简单的本地vue项目
前提 安装好node.js.npm.vue-cli.为什么要先安装这些,建议查看https://www.cnblogs.com/jixue/p/10673875.html,这个对于vue-cli理解很 ...
- VSCode 启动 Vue 项目 npm install 报错
1. 报错后,查看了版本. 查看node版本:node -v 查看npm版本:npm -v 查看Augular版本:ng --version 2. 感觉 Augular CLI版本太低,使用以下方 ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法
图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...
- webstorm 点击右上角运行run 启动vue项目
点击右上角框 -> 编辑结构 点击加号 新增一个npm项目 前提:node环境已经安装完成,npm包管理器 1.进行定位到项目的路径2.安装依赖包,npm install3.启动服务,npm r ...
- 基于Idea从零搭建一个最简单的vue项目
一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...
- Vue电商后台管理系统项目第1天-基本环境搭建&登录功能
基本环境搭建完成 安装npm包:npm -S i vue vue-router axios element-ui 配置Eslint: 打开设置,搜索Eslint拓展,然后将下面代码覆盖进去即可 { , ...
随机推荐
- canvas万花筒案例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Ti ...
- vue2.0 之 douban (一)框架搭建 及 整体布局
1.创建豆瓣项目 我们通过官方vue-cli初始化项目 vue init webpack douban 填写项目描述,作者,安装vue-router 初始化后,通过npm install安装依赖 cd ...
- optistruct对称约束设置
如对YZ面对称,则在对称面处约束1 5 6自由度.
- uid auid euid的区别
关于euid suid guid,参考这篇很好的文章 uid auid euid的区别? initially: 最初地, 一开始地 jackson had initially bloodied his ...
- 在阿里云centOS7上部署Redis 5.0.5主从 + 哨兵模式
一.在两台服务器上分别安装.配置Redis 5.0.5 ,为一主一从 安装Redis关键命令: 将安装包上传至:/home 目录下解 压:.tar.gz 安装依赖:yum install gcc 安装 ...
- liunx 定时任务crontab格式说明
每分钟执行 */1 * * * * 每小时执行 0 * * * * 每天执行 0 0 * * * 每周执行 0 0 * * 0 每月执行 0 0 1 * * 每年执行 0 0 1 1 *
- json模块:字符串与字典之间的转换--loads,dumps,load,dump
一.json转化成字典: product.json文件:将该文件内容转换成python中字典,方法如下: 方法一:使用.loads(),先读后转换 import json #导入json, 注: ...
- 剑指offer--day09
1.1 题目:栈的压入.弹出序列:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列 ...
- Windows 10更新后无法启动Dolby音频驱动程序
在电脑更新Windows 10 1903版本后,重启出现如下问题: 经查,这与驱动强制签名有关.解决方法如下: 打开"设置"->"更新与安全"->& ...
- Git利用命令行提交代码步骤
利用命令行提交代码步骤进入你的项目目录1:拉取服务器代码,避免覆盖他人代码git pull2:查看当前项目中有哪些文件被修改过git status具体状态如下:1:Untracked: 未跟踪,一般为 ...