Vue学习笔记（4）Vue-cli4项⽬搭建+⽬录结构+项⽬打包、部署VueCLI 脚⼿架
Vue CLI 介绍
CLI是什么?
命令⾏界⾯（英语：command-line interface，缩写：CLI）是在图形⽤户界⾯得到普及之前使⽤最为⼴泛的⽤户界⾯，它通常不⽀持⿏标，⽤户通过键盘输⼊指令，计算机接收到指令后，予以执⾏。也有⼈称之为字符⽤户界⾯（CUI）。
Vue CLI 是什么？
Vue CLI 是⼀个基于 Vue.js 进⾏快速开发的完整系统。使⽤ Vue 脚⼿架之后我们开发的页⾯将是⼀个完整系统(项⽬)。
Vue CLI 的优势：
通过 vue-cli 搭建交互式的项⽬脚⼿架。
主流前端框架⽐如 bootstrap、jquery 等可以通过执⾏命令⽅式下载相关依赖
通过 @vue/cli + @vue/cli-service-global 快速开始 零配置原型开发
⼀个运⾏时依赖 (@vue/cli-service)，该依赖：
可升级（⼀条命令）；
基于 webpack 构建，并带有合理的默认配置；
webpack 是⼀种项⽬打包⽅式：将编译好的项⽬源码 ===>部署到服务器上直接使⽤；
可以通过项⽬内的配置⽂件进⾏配置；
通过修改默认配置⽂件达到⾃⼰想要的项⽬环境。
可以通过插件进⾏扩展。
vue、v-charts、elementui …
⼀个丰富的官⽅插件集合，集成了前端⽣态中最好的⼯具。
Nodejs、Vue、VueRouter、Webpack、yarn …
⼀套完全图形化的创建和管理 Vue.js 项⽬的⽤户界⾯；
Vue CLI 安装
Node.js 环境准备
1. 前往这⾥下载 Node.js：
2. 配置 Node.js 环境变量；（建议百度）
3. 使⽤ node -v 验证 Node.js 是否安装成功
npm 介绍：
nodejs包管理⼯具（node package mangager）:
npm 对前端主流技术进⾏统⼀管理
可以将 nodejs 想象成 Maven：
maven 管理 java 后端依赖 — 远程仓库(中⼼仓库) — 阿⾥云镜像；
npm 管理前端系统依赖 — 远程仓库(中⼼仓库) — 配置淘宝镜像；
Node.js 配置淘宝镜像：
npm config set registry registry.
查看 Node.js 配置的远程仓库：
npm config get registry
Node.js 配置 npm 依赖下载位置：（位置⾃定义）
npm config set cache "D:\CodeTool\nodereps\npm_cache"
npm config set prefix "D:\CodeTool\nodereps\npm_global"
验证 Node.js 环境配置：
npm config ls
安装 Vue 脚⼿架
npm uninstall -g @vue/cli  # 卸载3.x版本脚⼿架
npm uninstall -g vue-cli  # 卸载2.x版本脚⼿架
安装 3.x 版本的 Vue CLI：
npm install -g @vue/cli
验证安装成功：（如果显⽰⽆法识别 “vue”，需要将 d 配置到环境变量）
vue --version
第⼀个 Vue 脚⼿架项⽬
Vue CLI 中项⽬开发⽅式：⼀切皆组件！
1. VueCLI 开发⽅式是在项⽬中开发⼀个⼀个组件对应⼀个业务功能模块，⽇后可以将多个组件组合到⼀起形成⼀个前端系统。
2. ⽇后在使⽤ Vue CLI 进⾏开发时不再书写html，编写的是⼀个个组件(.vue⽂件)，打包时 Vue CLI 会将组件编译成运⾏的 html ⽂
件。
命令创建项⽬
（1）使⽤以下命令来创建⼀个新项⽬：
vue create hello-world
（2）我们选择 ⼿动配置：⽤⽅向键 ↑ ↓ 操控选项，Enter 确定；
Please pick a preset: (Use arrow keys)
> default (babel, eslint)# 默认配置
Manually select features # ⼿动配置
（3）选择配置，勾选如下即可：⽅向键 ↑ ↓ 操作，按空格选中，Enter 确定；
Vue CLI v4.4.6
Please pick a preset: Manually select features
Check the features needed for your project:
(*) Babel
() TypeScript
() Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
() Unit Testing
>() E2E Testing
（4）⾸先检查刚才选择的配置；
然后问我们是否使⽤ history mode，其实就是页⾯路由含不含有 #；这⾥我们选择 Y
Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
Use history mode for router? (Requires proper server setup for index fallback in production)(Y/n)
y
（5）选择CSS预编译器，这⾥我们选择Less；
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
（6）选择 ESLint 代码校验规则，提供⼀个插件化的 javascript 代码检测⼯具，这⾥我们选择 ESLint + Prettier;
Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier
（7）选择什么时候进⾏代码校验，Lint on save：保存就检查，
Lint and fix on commit：fix 或者 commit 的时候检查，这⾥我们选择第⼀个；
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
() Lint and fix on commit
（8）选择把配置保存到哪个⽂件中，
In dedicated config files 存放到独⽴⽂件中，In package.json 存放到 package.json 中，
这⾥我们选择放到 package.json 中；
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
> In package.json
（9）问我们是否保存刚才的配置，以后的⽂件可以直接使⽤，选择 N。
Save this as a preset for future projects? (y/N)
N
⾄此项⽬搭建完毕。
使⽤如下命令运⾏项⽬：
cd hello-world # ⾸先进⼊项⽬根路径
npm run serve # 运⾏项⽬
浏览器输⼊如下路径来访问项⽬：localhost:8080
图形化界⾯创建项⽬
使⽤图形化界⾯创建和管理项⽬：vue ui
vue-cli4 ⽬录结构
node_modules：⽤于存放我们项⽬的各种依赖；
public：⽤于存放静态资源（不会变动的）；
public/index.html：模板⽂件，作⽤是⽣成项⽬的⼊⼝⽂件。
浏览器访问项⽬的时候就会默认打开的是⽣成好的 index.html。
src：是存放各种 .vue ⽂件的地⽅。
src/assets：⽤于存放着各种静态⽂件（可能会变动），⽐如图⽚。
src/components：存放公共组件（可复⽤），⽐如 header.vue、footer.vue 等。
src/router/index.js：vue-router 路由⽂件。
需要引⼊ src/views ⽂件夹下的 .vue，配置 path、name、component。
src/store/index.js：是 vuex 的⽂件，主要⽤于项⽬⾥边的⼀些状态保存。
⽐如 state、mutations、actions、getters、modules。
webpack打包流程 面试src/views，存放页⾯组件（不可复⽤），⽐如 Login.vue，Home.vue。
src/App.vue：App.vue 是项⽬的主组件；
App.vue 中使⽤ router-link 引⼊其他模块，所有的页⾯都是在 App.vue 下切换的。
src/main.js：⼊⼝⽂件，主要作⽤是初始化 vue 实例，同时可以在此⽂件中引⽤某些组件库或者全局挂载⼀些变量。
.gitignore：配置 git 上传想要忽略的⽂件格式。
package.json：模块基本信息项⽬开发所需要的模块，版本，项⽬名称。
package-lock.json：是在 npm install 时候⽣成的⼀份⽂件，⽤于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。
vue-cli 中使⽤ Axios
安装 axios：
npm install axios --save-dev
配置⽂件 main.js 中引⼊ axios：
import axios from'axios';
Vue.prototype.$http=axios;
使⽤ axios：·
this.$("url").then((res)=>{});
this.$http.post("url").then((res)=>{});
Vue 脚⼿架项⽬打包
在项⽬根⽬录中执⾏如下命令：
npm run build
注：Vue脚⼿架打包的项⽬必须在服务器上运⾏，不能直接双击运⾏；
在打包之后项⽬中出现 dist ⽬录，dist ⽬录就是 Vue脚⼿架项⽬的⽣产⽬录（直接部署⽬录）。
Vue 脚⼿架项⽬部署到 springboot 项⽬
打包完后，如何将项⽬部署到 SpringBoot 项⽬上呢？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。