【vuejs小项目】一、脚手架搭建工作

2024-05-18 02:00:35

一、关于vuejs

这是一个MVVM的前端开发框架，model（数据）、viewmode（通讯）、view（视图），它吸取了reactjs和angularjs的长处，核心重点在于组件化的设计原则。

我们都知道一个普通常见的页面，他会由header,body,footer,组成，里面再细分还有nav，list，slidebar等等，组件化就是将这些会重复用到的代码封装起来，在一个页面中需要用到的时候进行引入。

二、搭建脚手架（初始化项目）

做一个项目开始将一些文件环境搭建好，这里vue提供了vue-cli作为项目搭建工具，在nodejs环境下进行安装，nodejs版本在4.0以上

以下是在window环境下的安装步骤

1.node -v 查询版本

2.npm install -g vue-cli 安装vue-cli

3.vue 查看是否安装成功

4.vue list 查看可用模板

5.vue init webpack project-name 选择一个模板（webpack）初始化，注意这里进入到需要项目所在目录，然后根据提示填写作者等内容

6.cd project-name 进入项目文件夹

7.npm insatll 安装依赖，这里是因为在init后文件根目录下有一个package.json文件，这个文件中包含了所需要的包，可以自动安装。在没有这个文件的时候我们需要先init 然后安装所需要的包，package.json会显示安装成功后的包的版本信息

8.npm run dev 启动项目，端口号是8080

vue-cli github地址

转载于:https://www.cnblogs.com/hodgson/p/6160323.html

【vuejs小项目】一、脚手架搭建工作相关推荐

51小项目——使用proteus搭建简易的光照度计-（2）
此篇博客承接上一篇:51小项目--使用proteus搭建简易的光照度计-(1) AD信号处理模块主要内容为51单片机最小系统的构建硬件主控复位按键晶振电路串口下载模块软件原理叙述单片 ...
PIC单片机（PIC16F873）小项目五（电路工作原理）
怎么上传图片呀? 1.系统简介本系统为xxx检测仪,用于检测xxx载重量,并以模拟输出量形式把载重量传递给主控制系统. 检测仪根据电梯轿底橡胶块随载重做弹性变化的原理,通过霍尔传感器检测其位移变化且 ...
vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
springboot-vue简单小项目搭建
springboot-vue (前端VUE部分) 简单搭建一个基于springboot+vue的小项目(前端VUE部分) 首先,将整个项目下载下来,然后在项目文件夹里面执行命令: npm instal ...
Java web小项目_个人主页（1）—— 云环境搭建与项目部署
摘自:Java web小项目_个人主页(1)-- 云环境搭建与项目部署作者:丶PURSUING 发布时间: 2021-03-26 23:59:39 网址:https://blog.csdn.net/ ...
vuejs项目开发环境搭建（ESlint安装）
vuejs项目开发环境搭建(ESlint安装) vuejs项目开发环境搭建,有时候需要安装ESlint! eslint对ES6语法支持更好,可以通过eslint在团队开发中快速统一ES6的语法,精简代 ...
vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm insta ...

最新文章

热门文章