Vue2项目架构搭建（二）——vue-cli脚手架创建项目

vue-cli是官方命令行工具，该工具为现代化的前端开发工作流提供了开箱即用的构建配置，只需几行命令就可以搭建好基础架构。安装vue-cli 使用npm全局安装vue-clinpm install -g vue-cli 安装完成后，执行vue list 会报“vue不是内部或外部的命令”，说明环境变量有问题vue-cli环境变量设置设置vue-cli的系统环境变量

摸路

5172人浏览 · 2018-01-19 14:35:41

摸路 · 2018-01-19 14:35:41 发布

vue-cli是官方命令行工具，该工具为现代化的前端开发工作流提供了开箱即用的构建配置，只需几行命令就可以搭建好基础架构。

安装vue-cli

使用npm全局安装vue-cli

npm install -g vue-cli

安装完成后，执行

vue list

会报“vue不是内部或外部的命令”，说明环境变量有问题

vue-cli环境变量设置

设置vue-cli的系统环境变量指向npm全局文件目录，找到系统环境变量里的“path”，将全局文件的路径添加进去

再执行 vue list 如下图所示证明vue-cli已经安装配置成功，可以用vue-cli创建项目了

vue-cli创建项目

上述已经测试vue命令已经可以执行，现在可以直接使用vue命令安装项目了，在你想要创建项目的文件夹下执行（为了方便，我直接丢D盘里了）

 vue init webpack my-vue

上述的命令意思为创建一个名为 my-vue的项目，模板为webpack，还有一种比较简单的模板是webpack- simple，根据你项目大小来确定，一直回车就好。

等自动安装好模块内容，会有两行提示

cd my-vue 进入到自己的项目目录 npm run dev 启动项目，完成后打开浏览器，打开返回的“http://localhost:8080”就能看到vue-cli创建的项目界面了，也说明项目创建成功

本人才疏学浅，如果哪位小伙伴发现问题或者有更好的优化，希望能留言我好及时修改和优化，大家一起学习一起进步，免得被不合理或者错误的东西误导后续看到此博文的小伙伴。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^