摘要：样式通过标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加，如要引入外部文件，首先需给项目安装依赖包，打开，进入项目目录，输入回车。
首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。
只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装http://blog.csdn.net/s8460049...
安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。
安装好了 node，我们可以直接全局安装 vue-cli：
npm install -g vue-cli
但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存
同样可以使用 cnpm -v 查看是否安装成功
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack
安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。
如果提示“无法识别 "vue" ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本
首先需要在命令行中进入到项目目录，然后输入：
vue init webpack Vue-Project
其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-temp...
Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹
配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖
cnpm install
然后启动项目
npm run dev
如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js
建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 " ./ "（原本为 " / "），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 " / " 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后，可以输入 npm run build 来进行打包工作
npm run build
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist 文件夹放到服务器就行了。
index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下图中的
1>router就是设置路由器
2>template:"
3>components:{App}就是引入的根组件App.vue
后期还可以引入插件，当然首先得安装插件。
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
【template】
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）
打一个比喻吧,
【script】
vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档，在后面我也会通过例子来说明。
【style】
样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，
如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。安装完成后，就可以在style标签下import所需的css文件，例如：
这样，我们就可以把style下的样式封装起来，写到css文件夹，再引入到页面使用，整个vue页面也看上去更简洁。
router文件夹下，有一个index.js，即为路由配置文件
这里定义了路径为"/"的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件
类似的，我们可以设置多个路由，‘/index","/list"之类的，当然首先得引入该组件，再为该组件设置路由。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
例如现有组件footer.vue,原文地址
如果在其他页面中有使用到该组件可以如下：
欢迎来到人员管理系统
（1）引入组件 import FooterNav from "../../components/footer.vue"
（2）局部注册 注意写在export default内部，components:{FooterNav}，该写法为es6写法阮一峰es6教程，将视图中的使用的组件和相关数据对外开放，在内部vue-loader会进行相关操作的处理
（3）使用组件
注意：相对路径中./为当前目录../为上级目录
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107369.html
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...
阅读 3094·2023-04-25 22:43
阅读 3390·2021-09-06 15:15
阅读 1149·2019-08-30 15:54
阅读 3346·2019-08-30 14:20
阅读 2730·2019-08-29 17:16
阅读 2949·2019-08-29 15:28
阅读 3295·2019-08-29 11:08
阅读 971·2019-08-28 18:05
