vue-cli

本节知识点

• 安装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个板块