1, 下载 node.js 安装 node -v npm -v 查看是否安装成功
2,安装cnpm ,由于npm有些资源被屏蔽, npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待
3,安装vue-cli 脚手架构建工具,npm install vue-cli (vue 2.x 版本) -g (全局); npm install -g @vue/cli (vue 3.x版本) vue -V
4,vue create mydemo (创建3版本 下的项目) ;
vue init webpack my-project (vue-cli2.x下的版本)
5,cd mydemo npm run serve(启动项目)
解析打包.vue文件, vue把每一个独立的组件放在一个.vue 的文件中,该文件提供三个自定义标签(template script style )来放置组件不同的内容块,但因为浏览器不能够直接去识别该文件类型,所以需要通过webpack 进行编译打包,提供了 vue-loader
vue-cli :脚手架 构建一个项目开发过程中必须使用的一些内容
npm uninstall -g vue-cli
npm install -g @vue/cli
init:初始化 (创建)基于vue的项目 ;构建模板的名称,常用的是webpack; 要构建的项目的名称
vue init webpack hello :基于webpack
项目结构:
build目录:构建项目命令所需要使用到的一些脚本文件和配置文件
config目录:在vue-cli中会自动安装一个小型的express搭建的热重载的web服务器,config里面就是关于这个服务器的相关配置
dist目录:项目编译构建上线后的存放目录
node_modules目录:项目依赖包存放目录
src目录:项目源代码存放目录
static:静态资源存放目录
main.js文件: vue脚手架为我们自动生成的项目中设置的入口文件,在该入口文件中,做了一些项目初始化的工作 (引入 vue, 引入必要的组件, 创建vue实例)
路由:
之前多页面的方式来组织和维护网站,用户体验不好(会刷新或跳转页面);较好的方式是数据(页面会发生变化),但不需要跳转,刷新 (1,通过ajax异步无刷新获取数据 ; 2,获取到数据以后通过vue 来处理和管理 ,渲染页面)
什么情况下获取数据渲染页面?
传统的方式:通过url 重新发送请求得到新的数据和页面