2020年08月05日 22:10
原创作品,转载时请务必以超链接形式标明文章原始出处,否则将追究法律责任。

之前一直使用angular,对于vue也有使用,但是都是建立在别人已经搭好的框架上,今天我就从头开始认识vue。
首先我们需要安装node,然后安装淘宝的cnpm,然后安装vue和vue-router以及vue-cli,cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。

命令分别如下:

捕获.PNG

安装好以后,我们在本机找个空目录,新建一个项目叫membership-vue,命令如下

vue init webpack membership-vue

过一会我们的项目就建好了,建好以后的项目结构如下

image.png

build文件下是webpack针对不同环境打包的相关代码

config下是一些配置,比如端口,js,css文件压缩等的配置

src文件夹下:

assets:放置一些图片文件

components:放置vue组件文件

App.vue:项目入口文件

main.js:项目的js核心文件,引入一些依赖包,注册路由以及component

router:Vue路由文件目录, 在router/index.js中可以定义不同url路由

static:防止静态资源,如图片,字体,视频等

index.html:首页入口文件

介绍完以后,我们使用npm start命令启动项目,如果启动时发现缺失包的错误,可以使用npm install重新安装一遍。

image.png

启动成功后,我们在浏览器输入上面地址看看

image.png

大家看到下面有一个列表,这个其实是element组件中的table实例代码,我只是直接拿过来用了,下一篇在搭建主页框架的时候我会讲述如何引用Vue Element

发表评论
匿名  
用户评论
暂无评论