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

2401_84434237

于 2024-07-04 22:35:33 发布

阅读量445

点赞数 5

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/2401_84434237/article/details/140191688

版权

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 环境准备

前往这里下载 Node.js：http://nodejs.cn/download/
配置 Node.js 环境变量；（建议百度）
使用 node -v 验证 Node.js 是否安装成功

npm 介绍：

nodejs包管理工具（node package mangager）:

npm 对前端主流技术进行统一管理
可以将 nodejs 想象成 Maven：

maven 管理 java 后端依赖 — 远程仓库(中心仓库) — 阿里云镜像；

npm 管理前端系统依赖 — 远程仓库(中心仓库) — 配置淘宝镜像；

Node.js 配置淘宝镜像：

npm config set registry https://registry.npm.taobao.org

查看 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 脚手架

Vue CLI 官网：https://cli.vuejs.org/zh/guide/

npm uninstall -g @vue/cli # 卸载3.x版本脚手架

npm uninstall -g vue-cli # 卸载2.x版本脚手架

安装 3.x 版本的 Vue CLI：

npm install -g @vue/cli

验证安装成功：（如果显示无法识别 “vue”，需要将 vue.cmd 配置到环境变量）

vue --version

第一个 Vue 脚手架项目

================================================================================

Vue CLI 中项目开发方式：一切皆组件！

VueCLI 开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统。
日后在使用 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 to select, to toggle all, 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 # 运行项目

浏览器输入如下路径来访问项目：

http://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 上传想要忽略的文件格式。
babel.config.js：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。
package.json：模块基本信息项目开发所需要的模块，版本，项目名称。
package-lock.json：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。