首页天道酬勤,

,

张世龙 05-06 11:02 8次浏览

最近,公司为了扩大业务,需要进行小程序相关的开发。 通过朝着全堆栈开发人员努力,我决定学习Vue。 去年csdn发送了《Vue.js权威指南》,从这本书开始练习吧。 啊,吼。

##一、环境建设

今天主要谈环境的构建方法和执行方法。

####1,npm安装

brew install npm如果没有安装brew,大家可以怎么安装brew哦。 这里不详细说明。

安装####2、vue-cli

vue-cli是用node编写的命令行工具,需要全局安装。

npm install -g vue-cli注:节点版本为4.x、5.x或更高

安装完成后,检查版本

vue -V ###,创建并运行项目

安装环境后,可以使用vue-cli命令快速创建用webpack构建的项目

在vue init webpack helloworld当前目录中创建了helloworld的项目。 然后我会执行

cd helloworld//跳到此目录并运行以下命令以安装依赖关系

npm install您可以看到从当前目录中生成了很多文件。 其中,我们主要在名为src的文件夹下进行相关操作。 通过运行以下命令启动项目

npm run dev打开浏览器,并输入http://localhost:8080以查看系统默认生成的页面。

本来有Vue的图标,被我去掉了,便于以后调试。

##三、Vue.js权威指南的第一个demo

准备好了。 现在开始练习《Vue.js权威指南》这本书的demo。 我在网上找了很久,但是找不到书的源代码,很遗憾啊。 第一个demo的代码保存为jk.vue

下面是第一个demo的代码:

template divid=' Didi-navigator ' ulliv-for=' tabintabs ' { tab.text }/Li/ul/div/templatescriptexportdefabs {text: '代驾' }] }}}/script你会发现我这里和书不太一样。 主要在我这里已经创建了app.js,所以我不需要执行名为new Vue的操作。 具体理由稍后详细说明。

App.vue的代码如下:

模板divid=' app ' hello world//div/templatescriptimporthelloworldfrom './components/JK ' export default { name 3333 } app{font-family:'avenir ',Helvetica,Arial,sans-serif; 微信字体智能: antialiased; - moz-OS x-font-smoothing :灰色缩放; 文本对齐3360中心; color: #2c3e50; margin-top: 60px; (stylestyle还在学习,大家不要在意身材不好。 赫赫黑

执行结果如下。

更多优秀文章可以通过微信扫描关注:

vue从入门到精通教程,vue实战