vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。它是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。它提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
一、安装vue
1、安装node.js,安装完node.js之后,npm也会自动安装
查询是否安装成功的命令:
node -v
npm -v
![a3ce0eee0df175de0d637498d47fd7f9.png](https://i-blog.csdnimg.cn/blog_migrate/fa62ab6b78aaaa103616d20772602069.jpeg)
2、全局安装脚手架工具vue-cli,命令如下:
npm install --global vue-cli
![dfe205366cb255d92a61b310d7566ed1.png](https://i-blog.csdnimg.cn/blog_migrate/a7a24ed7d4d8357cf8966fe50b6d0419.jpeg)
3、vue项目初始化命令如下,若没有安装webpack,则先安装webpack
npm install -g webpack
vue init webpack myVue
注:安装过程 中有个选项(Use ESLint to line your code ?选择 No )
![16eb120389d2b3e90187bbaa34af386d.png](https://i-blog.csdnimg.cn/blog_migrate/d57a432e78bc2c581c606405108adaef.jpeg)
初始化完成后的vue项目目录如下:
![88095180f277b02210c7b7937fee11f5.png](https://i-blog.csdnimg.cn/blog_migrate/11215e16ba31724feb0437fec6e74203.jpeg)
4、进入到myVue目录下,使用npm install 安装package.json包中的依赖
命令如下:
cd myVue
npm install
![f75f1fc908f58b52358f8fb71dc46a46.png](https://i-blog.csdnimg.cn/blog_migrate/1d1ad206351c6b04f36e7f990ad383f9.jpeg)
5、运行项目:
npm run dev
![049bf6a48420e36f5b7ddff6681bcf8c.png](https://i-blog.csdnimg.cn/blog_migrate/6a6353e0384d0d97c85015b8e7c74c3f.jpeg)
![b13b5320cb6375d90e48341c570b2d44.png](https://i-blog.csdnimg.cn/blog_migrate/70570c36ef219e9a537bac6d195cfc35.jpeg)
在浏览器上输入:localhost:8080,将会出现下面的vue初始页面:
![3ece7e392de56577ba2c99304ab6bd2d.png](https://i-blog.csdnimg.cn/blog_migrate/a8538d67c6319fa06837ebdcac499f15.jpeg)
6、结束项目运行:
ctrl+v,选择Y即可停止项目的运行
![bff431d729e45482b69169c2616f207d.png](https://i-blog.csdnimg.cn/blog_migrate/78c46d29300d9a29f0bbf562bdf78b4b.jpeg)
二、vue项目目录说明
![af4abd7ad7a237ba96a59ba0a5b4e909.png](https://i-blog.csdnimg.cn/blog_migrate/580a7823cccad75f633efd2be329f2e1.jpeg)
build:项目构建(webpack)相关代码
config:配置目录,包括端口号等
node_modules:npm加载的项目依赖块
src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
assets: 放置一些图片,如logo等
components:该目录里存放的我们的开发文件组件,主要的开发文件都存放在这里了
App.vue:项目入口文件
main.js:项目的核心文件
router:路由配置目录
static:放置一些静态资源文件
test:初始测试目录,可删除
.xxxx文件:这些是一些配置文件,包括语法配置,git配置等
index.html:首页入口文件
package.json:项目配置文件
README.md:项目的说明文档,markdown 格式
三、vue项目启动流程
1、在执行npm run dev的时候,会去在当前文件夹下的项目中找package.json文件,启动开发服务器,默认端口是8080;
![9619845304f3c1ca62f6526a2c79006b.png](https://i-blog.csdnimg.cn/blog_migrate/7d0232c6b4b78c0b0e64cf6e5f1ef03b.jpeg)
2、找到src的main.js文件,在该文件中new Vue的实例,要加载的模板内容App;
![4ec7416e7c52c8432b97bd89038d80ac.png](https://i-blog.csdnimg.cn/blog_migrate/c0f1a6599389ca7450584be20346d37f.jpeg)
3、App是src目录下的App.vue结尾的文件;
![91e15c98eafd50ebd994078ae559f654.png](https://i-blog.csdnimg.cn/blog_migrate/fab5f9bcff43054f6b982dc4a583af0e.jpeg)
4、在App.vue所对应的模板当中,有一个router-view在src目录下有一个router文件夹,该文件夹有个index.js文件,该文件是配置路由词典,指定了路由地址是空,加载HelloWorld组件
![37c3bbbfac72dd8451fe8242508901bf.png](https://i-blog.csdnimg.cn/blog_migrate/e0dcba4f7890c025479d8d6e332bada9.jpeg)
注:vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功
四、Vue的组件的使用
1、在components文件夹下创建.vue结尾的文件
例如在:src/components/public/目录下新建header.vue文件
![8aa64616dfdea749b3b5c24574232f1a.png](https://i-blog.csdnimg.cn/blog_migrate/23b1fbcb51474fea7160743309d184d0.jpeg)
header.vue文件内容如下:
![70b1fe553751f4b13e5bbea784adee72.png](https://i-blog.csdnimg.cn/blog_migrate/cd86c3c8661652d1d870cb980989950d.jpeg)
2、在路由配置文件src/router/index.js中引入组件并配置组件路由
2.1、引入组件
import Header from '@/components/public/header'
2.2、配置组件路由
{
path: '/header',
name: 'header',
component: Header
}
![a0aaab31d091716edbc8fde2e3da1b7f.png](https://i-blog.csdnimg.cn/blog_migrate/289c7656c9eff786f095a481ad9e7704.jpeg)
3、运行项目:npm run dev
4、在浏览器中输入:localhost:8080/header ,显示如下页面:
![617677f2591f0cfdfb54986de6083dc7.png](https://i-blog.csdnimg.cn/blog_migrate/3beffed1b271b8011a9d98cf206d3f56.jpeg)
附:vue生命周期示意图
![c79176ab76dbf1a8aed8099a776c690b.png](https://i-blog.csdnimg.cn/blog_migrate/c499bae9e13ccd42ff196cfd1d1d123b.jpeg)