2020年08月05日 22:10
原创作品,转载时请务必以超链接形式标明文章原始出处,否则将追究法律责任。
之前一直使用angular,对于vue也有使用,但是都是建立在别人已经搭好的框架上,今天我就从头开始认识vue。
首先我们需要安装node,然后安装淘宝的cnpm,然后安装vue和vue-router以及vue-cli,cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。
命令分别如下:
安装好以后,我们在本机找个空目录,新建一个项目叫membership-vue,命令如下
vue init webpack membership-vue
过一会我们的项目就建好了,建好以后的项目结构如下
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重新安装一遍。
启动成功后,我们在浏览器输入上面地址看看
大家看到下面有一个列表,这个其实是element组件中的table实例代码,我只是直接拿过来用了,下一篇在搭建主页框架的时候我会讲述如何引用Vue Element
发表评论
匿名
用户评论
暂无评论