Vue 入门之搭建vue脚手架
系列文章目录
第一章 Vue 入门之搭建vue脚手架
第二章 Vue入门之项目结构介绍
第三章 Vue入门之基本语法
第四章 Vue入门之企业站点开发实践
第五章 Vue入门之前端部署
文章目录
- 系列文章目录
- 前言
- 一、Vue介绍
- 二、使用步骤
- 1.准备环境
- 2.创建工程目录
- 3.创建项目
- 4.启动项目
- 5.浏览器访问
前言
vue现在是比较流行的前端框架,花一些时间学习下,特将学习过程分享出来,供大家一起学习。
一、Vue介绍
官网:https://vuejs.org/
Vue(读作 /vjuː/,类似view)是一个用于构建用户界面的 JavaScript 框架。它建立在标准 HTML、CSS 和 JavaScript 之上,并提供了一个声明性和基于组件的编程模型,可帮助您有效地开发简单或复杂的用户界面。
二、使用步骤
1.准备环境
我本地mac环境,采用homebrew傻瓜式安装(示例):
- 安装node
(base) valley@valleyMacBook-Pro ~ % brew install node
(base) valley@valleyMacBook-Pro ~ % node -v
v17.5.0
(base) valley@valleyMacBook-Pro ~ % npm -v
8.4.1
- 安装cnpm
(base) valley@valleyMacBook-Pro ~ % npm install -g cnpm --registry=http://registry.npm.taobao.org
- 安装vue-cli 脚手架构建工具
(base) valley@valleyMacBook-Pro ~ % npm install -g @vue/cli
(base) valley@valleyMacBook-Pro ~ % vue -V
2.9.6
2.创建工程目录
创建一个文件夹,为我们的项目工程目录。
(base) valley@valleyMacBook-Pro ~ % mkdir gitee
(base) valley@valleyMacBook-Pro gitee % cd gitee
3.创建项目
创建项目,名字叫companywebsite。
(base) valley@valleyMacBook-Pro gitee % vue create companywebsite
? Your connection to the default npm registry seems to be slow.Use https://registry.npmmirror.com for faster installation? YesVue CLI v5.0.4
? Please pick a preset: Default ([Vue 2] babel, eslint)Vue CLI v5.0.4
✨ Creating project in /Users/valley/gitee/companywebsite.
Vue 入门之搭建vue脚手架相关推荐
- Vue入门 - 环境搭建Vue项目创建
Vue起步:从零开始搭建一个完整的Vue项目 一.安装Node环境 1.下载Node.js安装包并安装 2.环境变量的配置 二.搭建vue项目环境 一.安装Node环境 1.下载Node.js安装包并 ...
- vue 入门环境搭建
公司项目要用vue.js来开发,要使用vue来开发前端框架,首先要有环境,所以给大家介绍一下如何搭建vue环境.其实很简单: 1.首先下载安装node.js. 去官网https://nodejs.or ...
- Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件 实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
- webpack搭建vue项目(不用脚手架)
webpack搭建vue项目(不用脚手架) npm默认安装的是最新版本,这里讲的是Webpack4用法,如果遇到问题请检查是否是版本问题 webpack5升级了一些东西,例如图片的打包 1.初始化项目 ...
- Vue环境的搭建和在vscode上的应用(Window10)
Vue环境的搭建 1.安装: 从官网下载安装包,解压到指定位置,就相当于安装完成了. 2.配置环境变量 找到node.js的文件夹,在里面找到src,把路径复制一下. 我在E盘建立了一个文件夹放nod ...
- 教你如何搭建vue项目
笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...
- 手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]
写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目 ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 关闭eslint检验;vue-cli3搭建的vue项目关闭eslint;脚手架3关闭eslint;
本文是解决关闭eslint的问题:如果想要开启eslint和配置,可以查看这篇开启eslint检验: 我们使用vue-cli3脚手架搭建vue项目时候,会默认选中eslint风格代码:如果想要关闭es ...
最新文章
- 微信小程序打开预览下载的文件
- centos6.8 安装nginx
- .NET Framework介绍
- tinycore php,tinycore中文支持
- 【Java】浅析神奇的this
- 信息安全工程师笔记-恶意代码防范技术原理
- 开源分布式搜索平台ELK+Redis+Syslog-ng实现日志实时搜索
- 杭电1861 游船出租
- 互联网分布式微服务云平台规划分析--SSO单点登录系统
- LeetCode 1 两数之和 python
- 使用Mac OS X如何开启和配置防火墙
- 文件系统03 - 零基础入门学习Delphi36
- Facebook团队关于网页缓存的再实践
- kaggle竞赛——泰坦尼克号获救
- 许远东:世界上只有2种流量,人找货和货找人,元宇宙机会在哪里
- 10个优秀的Golang开源库类,武装生产力
- 无广告的免费视频存储空间并提供视频上传转码的功能,很不错的哦
- ubuntu16.04安装ROS Kinetic(保姆式安装)
- Security+ 5. 实现主机/软件安全性
- openGL 平行投影和透视投影函数分析
热门文章