Vue-Cli脚手架搭建详细步骤

1.安装vue-cli
① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：

npm install webpack -g或者（npm install -g webpack）
安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令

npm install webpack webpack-cli -g

安装完成之后输入

vue -V

打开C:\Users\Andminster\AppData\Roaming\npm目录下可以看到：

2.用vue-cli来构建项目
① 我首先在D盘新建一个文件夹（dxl_vue）作为项目存放地，然后使用命令行cd进入到项目目录输入：

baoge是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。

npm install ：安装所有的模块，

解释下每个文件夹代表的意思(仔细看一下这张图）：

3.启动项目
npm run dev 一般默认 localhost:8080
没有被占用，直接成功（服务启动成功后浏览器会默认打开一个“欢迎页面”）：
如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js

如果打包项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ’ ./ '（开始是 ’ / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ’ / ’ 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
(具体操作, 见 上一个文章 , vue从打包到wamp)

//附上 原帖地址
https://www.cnblogs.com/HelloLc/p/14186991.html