本节知识点
- 安装vue-cli
- 介绍vue-cli构成
安装(两步骤，第一步就是安装vue-cli，第二步就是初始化)
在安装vue-cli 之前必须要安装node
全局安装vue-cli
npm i vue-cli - g
- 初始化项目
vue init webpack text2(项目名称随意填写不要起和vue有关的)
- 按照提示
cd text2
npm run dev
这样安装就都完成了
- 你在访问http://localhost:8080即可看见效果
效果如下:
2018-02-17_092416.jpg
Vue-cli项目结构讲解
结构如下图
2018-02-17_092530.jpg
build 就是webpack的里面文件
你要是想修改端口号就去dev-server.js里面看看
你要是想找入口文件就去webpack.base.conf.js里面
找到入口文件即可config
就是项目配置文件。我们要的变量配置都在这里src 重点 我们平时要写的文件都在这里了
components 文件夹就是组件 里面放的都是.vue
assets 文件夹就是静态文件
router 文件夹 就是路由文件夹里面是js文件
main.js 就是入口文件
简单来说一下流程
- main.js 我们一般不用去管。他主要是找到app.vue这个文件
- 我们重点写的就是路由和组件。 路由在router文件夹下面里面添加。
- 组件在components文件夹目录下写
- main.js 找到入口模板和入口路由
- 然后依据路由的不同在入口模板里面添加不同的组件
特别提醒
- 每个模板里面都必须有3个元素
即<template></template> <script></script> <style></style>这3个板块
