安装过程,部分参考https://www.cnblogs.com/yanxulan/p/8978732.html
1.安装node环境,下载地址:http://nodejs.cn/download/,检查是否安装成功:如果输出版本号,说明我们安装node环境成功
2.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/, 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org, 即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
3.搭建vue项目,全局安装vue-cli:输入命令 npm install --global vue-cli
4.进入项目目录,在项目文件夹下输入cmd打开:
进入你的项目目录,创建一个基于 webpack 模板的新项目,执行命令:vue init webpack my-project 执行这个命令后命令行会出现一些需要你填写选择的项目属性: should we run npm install.... (这句话是在问是否在工程创建后就 npm 安装依赖 这里面有几个选项 第一个是【是】 也可以选最后一个 稍后自己就安装依赖 即 在命令行执行npm install 命令 )
出现这个界面,说明安装成功 你可以在你选择的文件加下看到这些文件 (node-modules是依赖安装后出现的,没安装依赖以前没有node_modules文件夹)
5.运行测试:进入文件夹,执行命令 npm run dev
复制网址http://localhost:8080,打开浏览器访问
说明创建成功
6.目录结构:
build:构建脚本目录
build.js ==> 生产环境构建脚本;
check-versions.js ==> 检查npm,node.js版本;
utils.js ==> 构建相关工具方法;
vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;
webpack.base.conf.js ==> webpack基本配置;
webpack.dev.conf.js ==> webpack开发环境配置;
webpack.prod.conf.js ==> webpack生产环境配置;
config:项目配置
dev.env.js ==> 开发环境变量;
index.js ==> 项目配置文件;
prod.env.js ==> 生产环境变量;
node_modules:npm 加载的项目依赖模块
src:这里是我们要开发的目录,基本上要做的事情都在这个目录里
assets:资源目录放置一些图片或者公共js公共css,这里的资源会被webpack构建;
components:组件目录,我们写的组件就放在这个目录里面;
router:前端路由,我们需要配置的路由路径写在index.js里面;
App.vue:根组件;
main.js:入口js文件;
static:静态资源目录,如图片、字体等。不会被webpack构建
index.html:首页入口文件,可以添加一些 meta 信息等
package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
README.md:项目的说明文档,markdown 格式
.xxxx文件:这些是一些配置文件,包括语法配置,git配置等
7.开始一个测试项目
(1)在src-components目录下新建一个views目录,里面写我们的vue组件
在views目录下新建First.vue,
在router目录下的index.js里面配置路由路径,第一个是项目的默认页面 (2)在First.vue中编写测试代码, template 写 html,script写 js,style写样式
(3)打开终端,npm run dev,在浏览器中查看页面
注:config-index.js中,修改autoOpenBrowser的值为true,可运行时自动打开浏览器
选择默认浏览器:电脑搜索 应用和功能-默认应用-web浏览器,可以修改
(4)父子组件,完成父子组件通信:
在components目录下新建sub文件夹,用于存放一下可以复用的子组件。比如在sub下新建一个Confirm.vue组件
父组件First.vue:
引入:import Confirm from '../sub/Confirm'
注册:在<script></script>标签内的 name代码块后面加上 components: {Confirm}
使用:在<template></template>内加上<confirm></confirm>
子组件Confirm.vue:
父组件First.vue:
浏览器预览
在一个父页面同时调用两个子组件First.vue: