详细说明vue-cli的官方脚手架配置

一、准备工作

1.下载node.js和npm

2.将镜像源替换为淘宝镜像

第二，创建一个项目

1.建筑1.vue环境

创建目录简历1) NPM初始化-y2) NPM安装vue-CLI-g(安装vue-CLI) 3) vue初始化web pack-dirname(空时默认当前目录)

输入命令后，会问我们几个简单的选项，我们可以根据自己的需要填写。

项目名称：项目名称，如果不需要更改，只需按回车即可。注意：这里不能用大写字母，所以我把名字改成了VueLitest Project Description : Project Description，默认名字是A Vue.js项目，不用写就可以直接输入。作者：作者，如果你有一个配置git的作者，他会看的。安装vue路由器？要安装vue的路由插件吗？我们需要在这里安装，所以选择Y Use ESLint来Lint你的代码？是否使用ESLint来限制您的代码错误和样式。我们不需要在这里输入n。如果你是在一个大的团队中开发，你最好配置它。用Karma摩卡设置单元测试？你是否需要安装单元测试工具Karma Mocha，我们这里不需要，所以用Nightwatch进入n. Setup e2e测试？是否安装e2e进行用户行为模拟测试是不必要的，所以输入n .等待安装后，文件目录结构如下

这时，vue的开发环境已经搭建好了。

打开package.json，我们可以看到官方脚手架提供的四个脚本

我们可以直接在命令行上输入npm run star来查看vue提供的演示。

三、脚手架分析

当我们键入npm run start时，我们实际上是在构建目录下执行webpack.dev.conf.js。

webpack.dev.conf.js

“use strict”/*工具类主要提供以下方法：* assetsPath获取静态资源路径；* exports.cssLoaders返回各种类型样式文件的处理方法；* exports.styleLoaders返回webpack所需的css相关加载程序的配置。它还使用CSS加载器()*导出。“createnotifier回调节点-notifier”是一个跨平台的系统通知页面。*遇到错误时，它可以在系统的本机推送模式下向您推送信息。此方法用于推送错误信息。*跳转到utils */consutils=require('。/utils ')//引入webpack模块const Webpack=required(' Webpack ')/*引入配置文件。他下面有3个文件* dev . env . js导出开发环境的名称* prod.env.js各处生产环境的名称* index.js各处不同环境所需的具体配置*跳转到config的包*/constconfig=require('./config')//webpack-merge，用于合并两个配置文件对象，生成一个新的配置文件，有点类似于es6的配置文件，合并冲突时，第二个参数的属性值会覆盖第一个参数的属性值。const merge=require(' webpack-merge ')//用于处理文件路径的模块const path=require('path')/*配置webpack编译条目*配置web pack输出路径和命名规则*配置模块解析规则*为不同类型的模块配置处理规则*转到web pack . base . conf */const basebpackconfig=require('。/webpack . base . conf ')//一个用于复制资源的插件Const copy webpackplugin=require(' copy-webpack-plugin ')//一个Web Pack插件Const html webpackplugin=require(' html-Web Pack-plugin ')用于生成html文件并自动注入依赖文件(链接/脚本)//一个用于显示Web Pack错误提示的更友好的插件Const friendyerrorsplash=require(' friendly-errors-Web Pack-plugin ')//一个自动检索端口