第一个vue项目实例(vue-cli)

一、准备工作

vs code、chrome、node

二、步骤
1、全局安装vue-cli
npm install vue-cli -g
2、初始化一个项目
vue init <template-name> <projectName>
第一个是模板名称,第二个是项目名称,模板有webpack,webpack-simple ,browserify ,browserify-simple ,simple我们这个项目使用的是webpack。
3、把文件切换到初始化的项目中
cd projectName
4、安装依赖
npm install
5、运行
npm run dev

完成一个初始化vue项目

目录介绍:
1、bulid和config都是webpack配置
2、src是存放项目源文件的目录
3、static存放第三方静态资源,这个里面的gitkeep是这个目录为空,也可以把这个目录提交的git仓库里面,因为通常一个空目录是不能提交git仓库里面的。
4、babelrc是babel的配置项
5、editorconfig是编辑器的配置项
6、gitignore存放忽略建厂语法的目录以及不会提交的文件
7、index.html入口文件
8、package.json是项目的描述和依赖,我们在开始的时候执行npm run dev,就相当于执行了这个文件里面的script的dev对应的node build/dev-server.js

时间: 2024-10-11 05:25:57

第一个vue项目实例(vue-cli)的相关文章

创建一个自己的Vue UI组件库,并将它发布在npm上

本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新. 前期准备 初始化project 这里我们使用vue-cli来初始化一个vue项目. npm install -g @vue/cli or yarn global add @vue/cli vue create personal-component-set 首先我们来开发一个可复用的顶栏控件,这里

理解vue实现原理,实现一个简单的Vue框架

参考: 剖析Vue实现原理 - 如何实现双向绑定mvvm Vue.js源码(1):Hello World的背后 Vue.js官方工程 本文所有代码可以在git上找到. 其实对JS我研究不是太深,用过很多次,但只是实现功能就算了.最近JS实在是太火,从前端到后端,应用越来越广泛,各种框架层出不穷,忍不住也想赶一下潮流. Vue是近年出的一个前端构建数据驱动的web界面的库,主要的特色是响应式的数据绑定,区别于以往的命令式用法.也就是在var a=1;的过程中,拦截'='的过程,从而实现更新数据,w

从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起来. 初级前端初始化目录篇 项目伊始,我们肯定是先在terminal终端命令行(以下简称terminal)cd进入<project name>根目录,然后输入 npm init 初始化

JavaScript之实现一个简单的Vue

vue的使用相信大家都很熟练了,使用起来简单.但是大部分人不知道其内部的原理是怎么样的,今天我们就来一起实现一个简单的vue. Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现,因为vue主要是通过数据劫持来实现的,通过get.set来完成数据的读取和更新. var obj = {name:'wclimb'}var age = 24Object.defineProperty(obj,'age',{enumerable: tru

(vue.js)Vue element tab 每个tab用一个路由来管理?

(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词: 关于网友提出的“ (vue.js)Vue element tab 每个tab用一个路由来管理?”问题疑问,本网通过在网上对“ (vue.js)Vue element tab 每个tab用一个路由来管理?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下: 问题: (vue.js)Vue element tab 每个tab用一个

源码时代前端干货分享|从零动手封装一个通用的vue按钮组件

我们在使用目前最主流的前端框架vue在开发过程中,组件是一个非常重要的组成部分,可以这么说,所有的vue 应用,都是由一个一个的小组件拼装而成的.正是由于vue组件如此重要,所以vue的生态中,也非常多的UI组件库,其中最著名的非Element-UI莫属,里面有非常多的封装完善的组件提供给我们使用,大大的增强了我们的开发效率.那么,这些UI框架的组件,究竟是如何封装的呢?如何动手从零开始封装自己的组件呢?接下来,我们就从最简单的一个Button的组件封装说起.如下,是Element-UI中的按钮

教你撸一个简单的Vue自定义动态组件

components下创建 toast 文件夹, 文件夹里面创建 toast.vue 和 index.js toast.vue: <template> <div id="toastWrap" :class="[className,showAnimation ?'fadein':'fadeout',appointId==''?'fixed':'absolute']" v-if="show"> <span :class=

vue系列1:如何定义一个基本的Vue代码结构

1.Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别 MVC 是后端的分层开发概念: MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel 为什么有了MVC还要有MVVM <body> <!-- 将来 new 的Vue实例,会控制这个 元素中的所有内容 --> <!-- Vue 实例所控制的这个元素区域,就是我们的 V --> <div id=&q

命令行创建一个简单的vue项目过程

//计算机已安装好node和git环境 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org //Mac环境下全局安装cnpm cnpm -v //查看cnmp版本号 ls //查看当前目录 cd //进入根目录 cd git //进入git文件夹 cd VUE //进入VUE文件夹 ls //查看当前目录,显示为VUE文件夹内容 vue init webpack vue-project //在当前目录下创建名为v

43.纯 CSS 绘制一个充满动感的 Vue logo

原文地址:https://segmentfault.com/a/1190000015177284 感想: 又有点回到boder的三角形 HTML code: <div class="vue"> <span class="outer"></span> <span class="middle"></span> <span class="inner"></