vue脚手架是一个快速构建vue项目的工具,通过它,我们可以将vue所需要的文件安装完成。下面本篇文章给大家介绍一下vue脚手架--vue-cli,希望对大家有所帮助。
vue-cli是什么
vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本
vue-cli是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
安装vue-cli
① 使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npm install webpack -g或者(npm install -g webpack),安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。
② 全局安装vue-cli,在cmd中输入命令:npm install --global vue-cli
安装成功:
安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。
打开C:\Users\Andminster\AppData\Roaming\npm目录下可以看到:
打开node_modules也可以看到:
使用Vue-cli来构建项目
1、新建文件夹Vue,进入文件夹,输入 vue init webpack vue-cli-test,其中vue-cli-test为新项目文件名
2、跳入选择项来进行项目信息填写与确认Project name (baoge): -----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
Project description (A Vue.js project): ----项目描述,也可直接点击回车,使用默认名字
Author (): ----作者,输入mapengfei
接下来会让用户选择:
Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了
Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用。
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接y回车
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,选择安装y回车
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,选择安装y回车
3、配置完成之后,Vue目录下面多了一个vue-cli-test的文件夹,进入文件夹,下载依赖 npm install
修改配置,启动项目修改 config里面的index.js文件
修改端口号是为了防止端口号被占用,修改assetsPublicPath属性是因为打包后,外部引入js和css文件时,如果路径是以'/'开头,在本地是无法找到对应文件的,所以如果要在本地打开打包后的文件,就得修改路劲为'/'
输入 npm run dev 启动项目,成功后输入访问地址,显示如下界面
更多vue.js相关知识,可访问 Vue.js答疑 栏目!!