Vue的基础语法，常用特性，组件化开发以及路由的使用前面的文章已经全部介绍了，同时也介绍了如何使用webpack的一些依赖loaders和插件来一步步创建项目的。今天来介绍一些如何使用vue脚手架来创建项目通过脚手架Vuecli脚手架来创建项目有三种方式：1.基于交互式命令行的方式，创建Vue项目使用命令vuecreatemy-project（基于Vuecli3.X以上版本npminstall-gvue/cli）2.基于图形化界面的方式，创建vue项目vueui（基于Vuecli3.X以上版本npminstall-gvue/cli）3.基于vuecli2.x的模板（npminstall-gvue/cli-init），创建vue项目vueinitwebpackmy-project首先来说第三种创建方式：vuecli2.x版本1.打开cmd全局安装vuecli2.x的模板，安装脚手架命令npminstall-gvue-cli，初始化2.x脚手架模板npminstall-gvue/cli-init全局安装vuecli2.初始化项目vueinitwebpackmy-project初始化项目及项目名称3.询问选择安装哪些插件或者依赖(安装选择Y否则输入N，多项选择按上下箭头选择)，选择完后按enter进行项目创建创建项目的步骤4.项目创建完毕后，cd进入项目my-project更目录输入npmrundev把项目运行起来npmrundev把项目运行起来5.打开浏览器输入地址查看运行的项目6.项目文件介绍项目文件介绍Vuecli3.X版本（1）交互式命令行创建项目的方式：1.同样的首先要安装脚手架输入命令npminstall-gvue/cli2.创建项目输入命令vuecreatemy-project（my-project是默认项目名称，可以自己命名其他的）按enter键弹出下图，询问创建方式3.选择手动创建方式，选择要安装的依赖或者插件，按键盘的方向见上下箭头移动光标，按空格键选择要安装的项打上’*‘号，用到就安装，用不到可以先不装选择要安装的依赖4.当我们选择要安装的依赖后，就会询问下面一些安装步骤，路由模式我们一般都是默认的hash模式，所以选择not，Babel,ESLint,etc.的配置文件选择单独创建，方便修改配置，最后的是否保存创建模板，也可以选择是，这样以后就不用选择这些创建步骤，直接选择模板一键创建项目5.创建号项目，同样的先cdmy-vue进入项目根目录，然后输入命令npmrunserve让项目运行起来输入地址查看项目6.介绍项目文件项目文件介绍区别：Vuecli3.X之后对比Vue2.X版本，我们发现2.x里面的bulid和config配置文件夹不见了，文件目录被简化了很多那么我们怎么修改webpack和一些开发环境的配置呢？那就是手动创建文件vue.config.js进行配置（2）基于图形化界面的方式1.脚手架我们已经全局安装过，现在只要在cmd输入命令vueuicmd输入命令vueui2.执行完命令，浏览器会自动弹出项目创建面板项目创建面板3.点击创建，选择项目创建要放入的文件，这里选择先放在电脑桌面上，输入项目名称，选择包管理工具，初始化git创库，点击下一步4.首次创建我们一般选择手动创建项目，点击下一步（也可以从git仓库拉去已有项目预设）选择手动创建项目5.选择要安装的依赖或者插件等，一定要选择安装Babel，router，和最后一项使用配置文件，有统一整齐的代码风格，可以不安装linter/Formatter，它是eslint用来规范代码风格，让我们写的代码更加漂亮统一选择要安装的依赖6.选择安装less，选择标准eslint代码风格，其他两项选择默认即可，然后点击创建项目可以在cmd中查看创建进度6.启动运行App就可以查看项目了启动运行App7.我之前安装依赖或者插件，都是输入npm命令来安装依赖包和插件，图形可视化面板还提供了可视化安装依赖或者插件,比如我们需要axios来调后台接口，那我们就可以可视化的安装axios的包安装axios依赖8.安装element-ui插件使用element-ui，代码示例页面展示，el-button按钮
转载请注明：http://www.aierlanlan.com/rzfs/8363.html
