首页 > 专利信息

Vue学习笔记（4）Vue-cli4项目搭建+目录结构+项目打包、部署

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)

（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)

⾄此项⽬搭建完毕。

使⽤如下命令运⾏项⽬：

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。

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 项⽬上呢？

本文发布于:2024-09-25 03:23:03，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/2/178290.html

上一篇：集团档案库房搬迁方案

下一篇：Authorware课件打包发布常见问题分析

标签：配置组件选择代码系统

留言与评论（共有 0 条评论）