手把手,从零开始创建vue项目

vue

在创建项目之前我们首先要知道,为什么要vue项目" title="创建vue项目">创建vue项目,和创建项目我们需要知道的一些知识点:(如果对于这些知识了解有困难的同学可以,选择性的观看,不影响我们先创建项目)

一、需要了解的基本知识

node.js

Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。总结一下,node,js提供了javascript在浏览器以外的一个执行环境,满足一些特定的场景需求。

npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

vue2

是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件系统和vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定,从而使html值变化时可以同步修改js对象,js对象值变化时可以在页面暂时,使开发从复杂的document操作中解脱出来。

iview

一套基于 Vue.js 的高质量 UI 组件库,通过iveiw可以快速的开发出风格一致的前端界面。

了解完这些基本知识之后下面我们就开始动手操作

首先我们需要安装我们刚才提到的node.js

下载地址:https://nodejs.org/en/download/。

安装完成后,我们可以打开cmd 输入下面的命令查看是否成功安装

node -v

npm -v

这里环境就准备好了,开始动手创建项目

这里我们先打开idea创建项目

创建一个static Web项目,点击next

填写项目名称,选择目录。我这是名称取为demo,名字可以取自己想要的,(目录中最好不要有中文)

创建好后,这时我们项目打开就是这样的,是不是感觉没什么东西,不要着急~下面我们一步一步把需要的东西加进来

我们在右下角点击teminal打开终端

输入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org

(这里是下载淘宝镜像,为了提高我们下载速度,不影响项目搭建)

下面就是重点了我们需要安装我们的vue的脚手架工具

在teminal中输入

npm i -g vue-cli

完成后我们可以输入,测试是否安装成功
vue -V

到这里我们就离成功不远了**!**

接下来我们初始化包结构,输入

vue init webpack demo

这里会给我们一些选项,一律回车就可以,这里事件比较长要耐心等待

当teminal中显示

时就代表我们初始化包结构成功了,这里可以按照他黄字的提示按顺输入启动我们的项目

cd demo

npm install

npm run dev

输入完成后会显示如下内容

这里我们可以点击地址,或者打开浏览器输入网址localhost:8081

当显示这个页面的时候那么恭喜你你的项目就搭建成功了!


这时的目录应该是这个样子的

到这里我们vue项目的创建就完成了

后面我会总结一些这个目录文件的作用,和些我们常用的配置文件,还有一些简单的页面小demo,本人小白如果有什么问题,可以一起探讨交流。

以上是 手把手,从零开始创建vue项目 的全部内容, 来源链接: utcz.com/z/376371.html

回到顶部