vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面 。vue-cli是基于node环境利用webpack对文件进行编译、打包、压缩、es6转es5等一系列操作。目前vue-cli已经升级到了3.0版本，3.0所需的webpack版本是4.xxx，2.0版本目前也很流行,2.0所需的webpack版本是3.xxx，我们来讲讲两者的配置：
Vue2.0：
一.安装node.js环境:
去node官网下载node.js并安装(http://nodejs.cn/download/)。安装完成后可以在终端执行 node -v查看node 是否安装成功，下图是安装成功的提示，显示出当前安装的node的版本号。
二.全局安装webpack：
为了在其他任何目录下都能使用到webpack，进行全局安装，执行npm install webpack@3.12.0 -g 命令，npm 是Node集成的工具 npm install 是从github上下载webpack最新的包，“@3.12.0”表示安装指定的版本，因为现在已经升级到了4.0版本，如果不指定版本版本号就会安装最新的版本，同时vue-cli2需要的是3.xxx的版本，所以我们指定了一个固定版本，如果不指定则不需要，"-g" 全称是 " global (全局) " 表示全局安装。检查是否安装成功终端执行“webpack -v”或者"webpack --version"，如果显示具体的版本号则表示安装成功。
三.全局安装 vue-cli2:
执行“npm install @vue/cli -g”命令进行安装。“npm install @vue/cli -g” 命令是脚手架3的，“npm install vue-cli -g”命令才是脚手架3的，脚手架2和脚手架3是不相同的，如果现在使用 “npm install vue-cli -g”命令进行安装的话，下次使用脚手架3的时候就得卸载脚手架2，安装脚手架3，为了减少不必要的操作我们执行 “npm install @vue/cli -g ” 命令进行安装，然后再执行 “npm install @vue-cli-init -g ” 将脚手架2下载下来，在此环境下既可以安装脚手架2的模板，有可以安装脚手架3的模板。 检查是否安装成功终端执行“vue -V”或者"vue --version"，如果显示具体的版本号则表示安装成功。具体安装方式查看官网（https://cli.vuejs.org/zh/）。
四.初始化项目：
进入到自己要安装项目的文件夹目录，我这里是 “D:webpackProjectvue-cli2> ” 执行 “vue init webpack vue-cli2-project ” 命令，出现如下图提示 ，“vue-cli2-project” 是我们的项目文件夹的名字，就是最终显示在index.html中的title标签里和package.json中的，也可以自己进行修改，我们一般不会去改，直接按回车键进行下一步。
“? Project description (A Vue.js project)” 是项目的描述，自己可以修改或者使用默认的，我们一般使用默认的直接按回车键进行下一步，
这里是作者的信息，我们使用默认的，直接下一步，
这里有两个选项：Runtime + Compiler 和Runtime-only ，Runtime-only要比Runtime + Compiler 轻大约6KB,而且效率要高， 按上下键可以进行选择，默认是第一个，选择好后按回车键进行下一步，
这一步是询问是否使用vue-router（路由），因为在项目中我们会用到所以这里按Y 键，进行下一步，
这一步是询问是否使用ESLint（语法检查器），ES (ecscript) 即 javascript ,lint 限制的意思，也就是 javascript语法限制器，使得你的语法更加规范，如果你的语法不规范编辑器就会报错，你可能在开发过程中因为一个空格导致语法不规范进而报错（其实你的代码没有问题的），所以对于初学者不建议使用此语法，所以我们选择 n，并进行下一步操作，
这一步是询问是否使用单元测试，这个用的人比较少，所以我们不适用，输入n并进行一下步，
这里询问我们管理项目是用npm 还是yarn ，这里我们使用npm ,直接回车，接下来就是等待安装node_modules。下图表示安装完成：
进入到我们的项目目录下，然后执行 npm run dev 命令进行启动我们的项目，下图是我们的项目目录：
五、 项目目录介绍：
1、build 文件夹：webpack的一些相关配置；
2、config 文件夹：项目开发环境和生产环境的一些相关配置；
3、node_modules 文件夹 ：这里存放的是安装包，比如webpack、第三方插件库、项目的依赖文件；
4、src 文件夹：我们将要写的代码放在这里面，打包上线时会进行编译、压缩等操作。
5、static 文件夹：这里存放的是一些静态文件比如图片、css文件、不需要进行压缩的js文件，打包时这个文件夹将原封不动的放到dist（打包时自动生产的文件夹）文件夹下面。
6、.babelrc 文件：ES6语法编译配置，主要是将ES 转成ES 需要适配那些浏览器
7、.editorconfig 文件：定义代码格式，对代码的风格进行一个统一。
8、.gitignore 文件：git上传需要忽略的文件格式
9、 .postcssrc.js 文件：postcss配置文件
10、 index.html 文件：要进行访问的首页面
11、package-lock.json 文件：锁定依赖模块和子模块的版本号
12、package.json 文件：项目基本信息,包依赖信息等
13、README.md 文件：项目说明文件
文件详解：
1、package.json 文件：当我们在命令行时 npm run dev 的时候程序执行的是package.json文件的“script”脚本里的“dev”命令；
这段代码的意思是启动 “webpack-dev-server” 服务器，“--inline” 是 重新加载改变的部分，不会刷新页面，--progress是启动项目时显示进度，“--config build/webpack.dev.conf.js” 是执行build下面的webpack.dev.conf.js配置文件。我们可以添加其他属性比如 “--open” 是启动项目后自动在浏览器打开项目，其它配置可以查看相关文档（https://www.webpackjs.com/configuration/dev-server/#devserver）。“start” 和“dev”的作用是一样的，“build” 的作用是执行 build下的build.js文件，将当前的项目进行打包。打包后生成一个dist文件夹，放在其里面。webpack.dev.conf.js文件是我们在开发环境下的webpack配置文件，打开次文件，内容如下：
2.、build/webpack.dev.conf.js 文件：
本文件 的核心就是将webpack.base.conf.js的配置（公共配置）与本文件配置进行合并，再看一下 webpack.base.conf.js 文件：
3、build/webpack.base.conf.js 文件
主要的说明已经注释在了文件中，这个问价的主要配置有entry（入口文件）、output（输出文件）、loader ，这些都是必备的，而一些plugins（插件）已经在对应的环境文件（webpack.dev.config.js、webpack.prod.config.js）中进行了配置，再看一下webpack.prod.config.js文件：
4、build/webpack.prod.config.js：
当我们执行 npm run build 打包时执行的是: build下的build.js文件，build.js中引入了webpack.prod.config.js，因此build.js才是生产环境所需的webpack文件。
5、build/build.js:
6、build/check-versions.js: 检测node和npm的版本，实现版本依赖
7、build/vue-loader.conf.js:
8、build/utils:
9、config/index.js: 生产 和 开发 环境下webpack的公共配置文件
10、config/dev.env.js:
11、config/prod.env.js:
12 、node_modules文件夹：该文件夹下存放的是node的一些依赖模块，比如:require模块、path模块、http-proxy-middleware模块，还有一些我们通过npm安装的插件模块，比如vue、md5、vue-cli、ivew等。
13.、src文件夹： 该文件夹下面存放的是我们项目代码以及一些文件，components文件夹存放了我们自己写的组件，router文件夹里面存放了路由配置，mian.js是整个项目的入口js，在build文件夹下的webpack.dev.config.js中的entry中有配置（
app: 'https://blog.csdn.net/m0_/article/details/src/main.js'）。App.vue文件是项目的首页面。
到此这篇vue2.0脚手架的安装（vuecli脚手架安装）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/12829.html