关键词：
首先安装好nodejs和npm环境后，创建一个基于webpack模板的新项目，在Windows的cmd命令行模式或者node环境下新建命令：
$ vue init webpack project-name
cd project-name
npm install
npm run dev
以上命令则可创建一个新项目（项目名称project-name可自己输入），并运行。
以下是关于vue-cli中文件的执行顺序：
在运行项目后，
1、首先进入index.html页面中，
2、继而运行main.js，进行vue挂载
3、main.js中import了App.vue以及router文件，可将这些文件中的export default（默认输出）输出到页面上。
路由配置：
以上，再看router下的index.js文件，该文件用于引入vue组件，使用import语句，import后一个单词是该组件的命名，在后面则可直接用该名称代替vue组件，from后是组件路径。
在routes中配置组件，包括组件path（路径）、name（名称）、component（组件名）
path和name可以保持一致，name的作用可参考该链接：
其中，routes下的第一个配置，path:‘/‘表示根页面显示的组件（即服务器启动时的展示页面内容是该组件定义的）
其余都是页面中用到的组件，新添加的组件都必须在这里引入，否则页面会报错
注意事项：
1、在编写代码时，总是会报很多错，可能是因为开启了vue-li模板中的严格开发eslint。
关闭eslint的方法是：在build/webpack.base.conf.js中注释rules下的第一块代码，代码有以下两种情况
2、在vue文件中标签<template>下只能包含一个大的根标签，即所有元素都需要包裹在一个元素中，如都包在一个div中
3、在vue文件中使用<router-view>标签渲染子页面的内容
手把手教学之vue-cli快速搭建脚手架
1.自定义特征2.babel,router,vuex,css预处理器的选择3.使用history模式进行路由选择4.选择css预处理器(这里我们选择stylus)5.建立配置文件6.选择是否保存这个项目的预设7.安装包依赖,出现下图则表示安装成功8.命令行运行项目,出现下图则... 查看详情
快速入门vue-cli配置(代码片段)
作为一名使用了一段时间Vue.js的新手，相信和不少初入Vue的朋友一样，都对Vue-cli的配置一知半解。后来通过对webpack的学习，也算是对脚手架的配置有了一定的了解，所以也想把这段时间自己的成果分享给大家，希望能和大家一... 查看详情
vue-router路由vue-cli脚手架和模块化开发之vue-cli2.x脚手架工具基于webpacksimple模板与基于webpack模板构建项目
...bpacksimple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统。基于webpack构建，并进行默认配置，可通过插件扩展，可升级；vue-cli帮我们创建基本项目结构，跳过繁琐的项目配置环节，将精力集中在业务上；vue-... 查看详情
vue2.0入门
vue2.0据说也出了很久了，博主终于操了一次实刀。 整体项目采用 vue+ vue-router+ vuex（传说中的vue全家桶），构建工具使用尤大大推出的vue-cli 后续文章：如果有兴趣，可以移步 vue2.0开发实践总结之疑难篇&nbs... 查看详情
新手使用vue构建单页面应用实例
步骤：1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使用.vue文件进行组件化的开发 一、目录结构：二、搭建项目先安装vue-cli：sudo npminstall-gvue-cli使用vue-cl... 查看详情
vue2+vuex+vue-router快速入门项目搭建(代码片段)
安装 我们可以通过两种方式把vue引入到我们的项目中，一种直接通过 <script> 引入,这时vue会被注册为一个全局变量。第二种便是通过 npm 进行安装，这种方式可以很好的配合 webpack 或 browserify&nbs... 查看详情
来自一位react新手的react入门须知
参考技术A所有的html，css都可以写在js中，这就是jsx的用法。用于验证数据的类型是否是满足你的需要,不过我在现有的项目中没有特意的指定数据的propTyoe，因为这些都是前后端约定好的。此用法如下图：这个如同vue组件里面的pr... 查看详情
从零开始系列之vue全家桶带新手小白一起搭建第一个个人网站项目
未经允许，严禁转载，全文由blackchaos提供。 在安装好了前面大部分需要的插件，我们开始进行第一个个人项目。结合vue+vuex+vue-cli+vue-router+webpack使用。 1.我们先写用vue-router来单页面切换路由。先进入src文件夹。在component... 查看详情
vue项目快速入门(代码片段)
文章目录说明下载Node.jsnpm配置项目构建安装vue-cli创建应用项目结构Vue项目的特点（webpack)使用webpackVue路由路由使用基本架构路由嵌套传递参数方式一方式二重定向路由模式&404处理钩子函数总结说明此部分为自行整理下载... 查看详情
vue入门
...好了vuejs插件，idea要使用的话，需要安装一下该插件一、快速搭建项目vue-cli脚手架（Vue2.0）因为相信,所以看见. 查看详情
深入浅出mybatis之快速入门！
简介MyBatis的前身叫iBatis，本是apache的一个开源项目,2010年这个项目由apachesoftwarefoundation迁移到了googlecode，并且改名为MyBatis。MyBatis是支持普通SQL查询，存储过程和高级映射的优秀持久层框架。MyBatis消除了几乎所有的JDBC代码和参... 查看详情
深入浅出mybatis之快速入门！
简介MyBatis的前身叫iBatis，本是apache的一个开源项目,2010年这个项目由apachesoftwarefoundation迁移到了googlecode，并且改名为MyBatis。MyBatis是支持普通SQL查询，存储过程和高级映射的优秀持久层框架。MyBatis消除了几乎所有的JDBC代码和参... 查看详情
flutter实战之go_router路由组件入门指南(代码片段)
go_router入门指南1、go_router是什么2、go_router的初始化和嵌套（子）路由3、非嵌套路由的常规使用4、路由传递参数5、其他路由组件1、go_router是什么go_router是什么？用官方的话说ADeclarativeRoutingPackageforFlutter，也即是Flutter声明性的... 查看详情
flutter实战之go_router路由组件入门指南(代码片段)
go_router入门指南1、go_router是什么2、go_router的初始化和嵌套（子）路由3、非嵌套路由的常规使用4、路由传递参数5、其他路由组件1、go_router是什么go_router是什么？用官方的话说ADeclarativeRoutingPackageforFlutter，也即是Flutter声明性的... 查看详情
flutter实战之go_router路由组件入门指南(代码片段)
go_router入门指南1、go_router是什么2、go_router的初始化和嵌套（子）路由3、非嵌套路由的常规使用4、路由传递参数5、其他路由组件1、go_router是什么go_router是什么？用官方的话说ADeclarativeRoutingPackageforFlutter，也即是Flutter声明性的... 查看详情
vue.js：使用vue-cli快速构建项目
vue-cli是什么？vue-cli是vue.js的脚手架，用于自动生成vue.js模板工程的。vue-cli怎么使用？安装vue-cli之前，需要先安装了vue和webpack，不知道怎么安装的可以看我之前的文章《Vue+Webpack实现SPA应用文档》安装vue-clinpminstall-gvue-cli &nb... 查看详情
使用vue-cli创建vue项目及项目结构说明
...证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度Setupunittests 是测试，可以不用安装，选nSetupe2etestswithNightwatch是测试，可以不用安装，选n最后一项是选择用什么install依赖... 查看详情
vue-cli项目中如何使用锚点
两种方式：1.使用vue-router实现锚点功能（利用html5的history模式，vue-router的滚动行为）1importVuefrom‘vue‘2importVueRouterfrom‘vue-router‘34Vue.use(VueRouter)56constHome={template:‘<div>home</div>‘}7constFoo={templa 查看详情