参考资料:https://www.cnblogs.com/haitaoli/p/10304193.html
一.搭建项目环境
1.安装cli
npm install —global vue-cli
2.初始化项目(创建一个基于webpack模板的新项目)
vue init webpack 项目名
3.运行(进入项目安装依赖)
cd 项目
npm run dev/start
4.访问http://localhost:8080,页面显示如下则表示项目创建成功(一般会自行弹出页面)
二.项目目录
目录详细说明:
README.md:项目说明文件
package.json:第三方依赖
package-lock.json:第三方包的版本
LICENSE:开源协议说明
index.html:首页模板文件
postcssrc.js:postcss的配置项
gitignore:将本地git传至线上，不想上传的文件则配置在gitignore，提交时不会被提交至仓库中
eslintrc.js:配置了代码规范
eslintignore:里文件不受eslintrc.js检测工具的检测
editorconfig:配置编辑器语法
babelrc:做语法转换，转换成浏览器能够编译执行的代码
static目录：静态资源（图片，模拟的json数据）
node_modules:项目依赖的第三方node包
src目录：整个项目源代码
main.js:入口文件
App.vue:根组件
config目录:项目配置文件
index.js:基础配置信息
dev.env.js:开发环境配置信息
prod.env.js:线上环境配置信息
build目录：项目打包，开发环境，线上环境的配置内容
三.开始第一个vue项目
1.创建组件
(1)创建第一个组件
在components目录下新建组件First.vue,页面结构如下:
(2)配置路由路径
在router目录下的index.js里面配置路由路径
(3)查看页面效果
a.App.vue是根组件,先去除默认图片
b.访问http://localhost:8080/#/first/,页面效果如下:
2.父子组件
(1)创建子组件
将已创建的First.vue作为父组件
用同样方式创建子组件并在index.js里面配置路由路径
创建的子组件如图:
(2)在父组件中引入子组件
(3)查看页面效果
访问http://localhost:8080/#/first/,页面如下,父组件已经包含了子组件中的内容
3.父子组件通信
(1)子传父:
a.子组件
b.父组件
c.访问http://localhost:8080/#/first/
页面如下,点击按钮收到子组件传过来的值1
(2)父传子
a.父组件
b.子组件
c.访问http://localhost:8080/#/first/
页面如下,看到父组件传给子组件的内容显示在相应位置
4.使用路由实现页面跳转
创建一个新的组件Second.vue并配置路由路径
a.Second组件
b.使用实现跳转
c.访问http://localhost:8080/#/first/
页面如下,点击将去往页面二
5.使用less写样式
(1)安装less依赖
npm install less less-loader --save
(2)编写less
