Vue学习心得(1)

Vue 的安装方式

下载使用(两种方式)
1.直接下载并用script标签引入,Vue 会被注册为一个全局变量,平时对于 Dom 操作比较频繁的小项目可以直接这样使用。
2.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:针对单页应用的构建推荐使用这种方式,可以更好的体验到 vue 所提供的组件化功能 (单文件组件),顺带着享受到 webpack 带来的流畅的自动化开发体验。

 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

这里我通过webstorm软件开发工具进行开发。
Vue学习心得(1)_第1张图片
启动以后点击链接就可以进入,初始化的Vue界面。
Vue学习心得(1)_第2张图片
Vue基本使用
由于现在开发的项目大部分都是使用vue脚手架配置使用,所以在以后的学习Vue中,我也使用这种方式进行开发,下面演示一下第一个自己写的Vue界面。
1.首先新建一个Vue文件,并编写好基本的代码,用来展示。
Vue学习心得(1)_第3张图片
2.然后在router的文件夹下面的index.js中,配置路由。
Vue学习心得(1)_第4张图片

3.接着在浏览器中输入http://localhost:8080/#/first,就可以刚刚写好的first页面中。
Vue学习心得(1)_第5张图片

你可能感兴趣的:(vue)