vue开始

vue的安装

我建议最好是使用npm安装,关于npm,安装完node.js后自然会有可以查看npm的相关命令。

npm的安装直接下载.msi镜像,直接安装就可以了,安装完成后,node-v ,npm-v查看有相关信息。

淘宝镜像的安装

由于npm连接得是外网,推荐使用淘宝的镜像,安装方法如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完淘宝镜像后就可以使用: cnpm install [name] 安装对应的模块

安装CLI命令行工具

       Vue 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
有一些配置,默认回车就可以啦!然后就开始安装依赖,这个可能要等一段时间!
 

安装完依赖,然后就开始进入项目啦!

$ cd my-project
$cnpm install
$ cnpm run dev
 


成功

执行后访问http://localhost:8080/


Vue.js 是一款流行的 JavaScript 前端框架,可以用于构建单页面应用程序(SPA)和动态用户界面。如果你想开始使用 Vue.js 编写代码,可以按照以下步骤: 1. 安装 Vue.js:在命令行中使用 npm 命令安装 Vue.js,例如:`npm install vue`。 2. 创建 Vue 实例:在 HTML 页面中引入 Vue.js,并创建一个 Vue 实例,例如: ``` <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` 上面代码中,我们创建了一个 id 为 `app` 的 `div` 元素,并将其作为 Vue 实例的挂载点。在 `data` 选项中,我们定义了一个名为 `message` 的属性,其值为 `'Hello Vue!'`。在 HTML 中,我们通过双大括号语法 `{{ }}` 来绑定数据,这里绑定的是 `message` 属性的值。 3. 组件化开发:在 Vue.js 中,我们可以将页面拆分成多个组件,每个组件都是一个 Vue 实例。在组件中,我们可以定义自己的数据、方法、生命周期钩子等,然后将组件组合起来构建完整的应用程序。例如: ``` <div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<div>{{ message }}</div>', data: function () { return { message: 'Hello Vue!' } } }) var app = new Vue({ el: '#app' }) </script> ``` 上面代码中,我们定义了一个名为 `my-component` 的组件,并在 HTML 中使用 `<my-component></my-component>` 标签来引用它。在组件中,我们使用 `template` 选项定义了组件的模板,并在 `data` 选项中定义了一个名为 `message` 的数据属性。最后,我们在 Vue 实例中将 `my-component` 组件注册为全局组件。 以上是 Vue.js 的基础入门,建议你先学习 Vue.js 的基础语法和组件化开发,然后深入学习 Vue.js 的路由、状态管理、自定义指令等高级特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值