系列文章目录

第一章 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脚手架相关推荐

  1. Vue入门 - 环境搭建Vue项目创建

    Vue起步:从零开始搭建一个完整的Vue项目 一.安装Node环境 1.下载Node.js安装包并安装 2.环境变量的配置 二.搭建vue项目环境 一.安装Node环境 1.下载Node.js安装包并 ...

  2. vue 入门环境搭建

    公司项目要用vue.js来开发,要使用vue来开发前端框架,首先要有环境,所以给大家介绍一下如何搭建vue环境.其实很简单: 1.首先下载安装node.js. 去官网https://nodejs.or ...

  3. Vue入门指南-05 Vue实例的生命周期(快速上手vue)

    生命周期钩子 = 生命周期函数 = 生命周期事件 实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...

  4. webpack搭建vue项目(不用脚手架)

    webpack搭建vue项目(不用脚手架) npm默认安装的是最新版本,这里讲的是Webpack4用法,如果遇到问题请检查是否是版本问题 webpack5升级了一些东西,例如图片的打包 1.初始化项目 ...

  5. Vue环境的搭建和在vscode上的应用(Window10)

    Vue环境的搭建 1.安装: 从官网下载安装包,解压到指定位置,就相当于安装完成了. 2.配置环境变量 找到node.js的文件夹,在里面找到src,把路径复制一下. 我在E盘建立了一个文件夹放nod ...

  6. 教你如何搭建vue项目

    笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...

  7. 手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]

    写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目 ...

  8. 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架

    [Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...

  9. 关闭eslint检验;vue-cli3搭建的vue项目关闭eslint;脚手架3关闭eslint;

    本文是解决关闭eslint的问题:如果想要开启eslint和配置,可以查看这篇开启eslint检验: 我们使用vue-cli3脚手架搭建vue项目时候,会默认选中eslint风格代码:如果想要关闭es ...

最新文章

  1. 微信小程序打开预览下载的文件
  2. centos6.8 安装nginx
  3. .NET Framework介绍
  4. tinycore php,tinycore中文支持
  5. 【Java】浅析神奇的this
  6. 信息安全工程师笔记-恶意代码防范技术原理
  7. 开源分布式搜索平台ELK+Redis+Syslog-ng实现日志实时搜索
  8. 杭电1861 游船出租
  9. 互联网分布式微服务云平台规划分析--SSO单点登录系统
  10. LeetCode 1 两数之和 python
  11. 使用Mac OS X如何开启和配置防火墙
  12. 文件系统03 - 零基础入门学习Delphi36
  13. Facebook团队关于网页缓存的再实践
  14. kaggle竞赛——泰坦尼克号获救
  15. 许远东:世界上只有2种流量,人找货和货找人,元宇宙机会在哪里
  16. 10个优秀的Golang开源库类,武装生产力
  17. 无广告的免费视频存储空间并提供视频上传转码的功能,很不错的哦
  18. ubuntu16.04安装ROS Kinetic(保姆式安装)
  19. Security+ 5. 实现主机/软件安全性
  20. openGL 平行投影和透视投影函数分析

热门文章

  1. JavaScript-匿名函数
  2. NOKIA N8 拆机视频
  3. OpenCV2.4.8新鲜出炉!
  4. GRE over IPSec vs IPSec over GRE
  5. Note2-JAVA基础语法
  6. matlab一般迭代公式,迭代法及matlab实现.ppt
  7. AJAX框架衣柜收纳技巧,设计老手经验总结,4个地方一定要这样装柜子,美观又方便...
  8. 画企鹅,源码来自b站某up
  9. VMware中安装系统提示没有可用的映像
  10. NC65主子表单据,删除失败