准备工作

1、node.js
2、vue-cli
3、webpack

开始安装

Node.js 点击去下载Node.js
傻瓜式安装即可（记录安装路径，也可自选，路径不能包含中文），安装完毕后需要检查环境变量是否自动配置。
vue-cli
之前已经安装过脚手架的小伙伴，打开命令行输入vue -V ，查看脚手架的版本，低于3.0则需要重新安装，首先命令行输入npm uninstall -g vue-cli卸载已经安装的脚手架，等待卸载成功后，输入npm install -g @vue/cli重新安装最新版本，安装完毕后输入vue -V 查看是否安装成功。
webpack
输入npm i webpack -g直接安装脚手架，webpack4还要单独安装，可输入npm i webpack-cli -g安装，安装完毕后输入webpack -v 查看是否安装成功。

搭建工程

在工作空间中打开cmd命令行，输入vue create 项目名 直接回车，创建项目
创建成功后，输入vue init webpack 项目名 安装模板，会弹出一系列的问句，一直回车即可。
直到出现下列问句：
（1）“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

（2）“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

（3）“Use ESLint to lint your code”:是否使用ESLint，默认使用，这样会生成相关的ESLint配置

（4）“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦

（5）“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”
进度条读完之后，项目基本搭建完成了。

目录结构

build 文件夹：

这个文件夹主要是进行webpack的一些配置，就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的，比如生成环境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的删除，其实都是和业务相关了，其他的都可以不需要动。

config 文件夹：

这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器，这个地方和我们息息相关，和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性，然后在里面加上对应的后台地址即可，例如：

src文件夹：

这个文件夹是整个项目最主要以及使用频率最高的文件夹。

(1）“assets”: 共用的样式、图片

(2）“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

(3）“router”: 设置路由

(4）“App.vue”: vue文件入口界面

(5）“main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
static 文件夹：

存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用
package.json:

这个文件有两部分是有用的：scripts 里面设置命令，例如设置了dev用于调试则我们开发时输入的是
npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

搞定！！

当所有依赖包都下载好之后，输入命令：npm run dev 运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧，总结下来其实只有四步

npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目，形成基本结构
npm install 依赖包
npm run dev 运行
我们接下来要做的就是业务相关的了，vue 就是一个个组件往里面加就可以了。

基于vue-cli搭建VUE.js项目相关推荐

vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
使用Vue cli创建Vue项目
使用Vue cli创建Vue项目第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
vue/cli 和 vue 版本对应及安装
文章目录 Vue Cli 使用方式: 关于Vue Cli版本介绍 @vue/cli 安装: 版本号对应查看vue和@vue/cli版本: Vue Cli Vue CLI = Vue + 一堆的js插 ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
Vue + Spring Boot 项目实战（二）：使用 CLI 搭建 Vue.js 项目
文章目录一.安装 Vue CLI 二.构建前端项目 2.1.创建一个基于 webpack 模板的项目 2.2. 安装图解 2.3. 项目结构总览 2.4. 运行项目 2.5. 浏览器验证项目Git ...
Vue.js 学习笔记十二：Vue CLI 之创建一个项目
目录创建一个项目创建一个项目运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...
【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——③项目开发中引入vue-router，并进行配置
1.引入vue - router :搜索vue-router,打开vue-router官方文档 2.由于本项目基于vue2开发,因此将官网切换到v3.x版本,在导航-安装目录下选择npm安装方式安 ...

基于vue-cli搭建VUE.js项目