vue项目搭建

一、vue项目搭建（如遇问题依据不同情况动态解决搭建过程中的问题）

VUE官网链接:https://cli.vuejs.org/.
node.js下载链接: https://nodejs.cn/download/
在PATH中配置node的环境变量，node自带npm和npx

C:\workSpace>node -v
v18.17.0
C:\workSpace>npm -v
9.6.7
C:\workSpace>npx -v
9.6.7
# 生成默认的package.json文件
C:\workSpace>npm init -y
Wrote to C:\workSpace\package.json:
# 脚手架搭建 可指定版本若：cnpm i -D @vue/cli@4.5.15
cnpm i -D @vue/cli
# 查看版本 不指定版本为2.9.6
npx vue -V
# 创建项目"project"项目名称，选择vue2 or vue3
npx vue create project
# 安装yarn
npm install -g yarn
# 进入“project”目录下执行以下命令启动本地开发服务器的命令
yarn serve

可以vue.config.js修改启动后自动浏览器打开

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{open: true,host: "localhost"}
})

在这里插入图片描述
Vue图形界面,可以在界面创建项目

npx vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

在这里插入图片描述
仪表盘可以添加插件

1.1 Vue-CLI2新建项目对比

在命令窗口输入Vue-CLI2创建项目的命令

vue init webpack project 
#提示下面的配置参数信息：
? Project name (vuecli2test)输入项目名字，之前init中的那个只是文件夹的名字，不是项目名字
? Project description (^ Vue.js project)项目描述，默认值就是()里面的内容
? Author (coderYJ xxxxx)作者，默认值是()里面的值，默认是git账号
? Vue build (Use arrow keys)选择Vue Build环境，是选择Rumtime + Compiler方式，还是选择Runtime-only，这里选择only模式
> Runtime + Compiler: xxxxxxxxRuntime-only:xxxxxxxxxx
? Install vue-router是否安装路由 n
? Use ESLint to lint your code 是否对ES代码进行限制，即编写是否规范，例如当你在结尾添加一个“,”时就会导致编译失败，总之一句话，ESLint代码规范能让你怀疑人生，并且针对JS的ESLint规范会与其他语言的规范差别很大，对于后台全栈开发者来说，短时间内很难适应；
? Pick an ESLint preset(Use arrow keys)当你选择Y的时候，这个选项让你选择哪个规范去遵循：
>Standard标准规范
>Airbnb爱彼迎公司规范
>none自定义规范
? Set up unit tests是否集成单元测试
? Setup e2e tests with Nightwatch是否依赖于Nightwatch来实现端end到端end的自动化测试？n
? Should we run npm install for you after the project has been created?你的项目是使用npm工具来管理，还是yarn工具来管理，还是自己直接来管理？
>yes,use npm
>yes,use yarn
>no,i will handle that myself

在这里插入图片描述

1.2 全局安装 or 本地安装

全局安装是将Vue.js安装到全局环境中，这意味着我们不需要在每个项目中都安装Vue.js。只要我们安装了一次Vue.js，我们就可以在任何地方使用它。

而本地安装则将Vue.js安装到当前项目的本地环境中，这意味着我们需要在每个项目中单独安装Vue.js。这种方式的缺点是，每个项目都需要安装Vue.js，这会使项目的体积变得很大。
全局安装vue-cli 2.9.6和项目创建

 # 安装webpack
npm i webpack -g# 安装脚手架npm i vue-cli -g#创建项目vue init webpack demo

全局安装vue-cli 4.5.15和项目创建

 # 用npm安装脚手架
npm install -g @vue/cli  # OR# 用yarn 安装脚手架
yarn global add @vue/cli#创建项目vue ui # OR#创建项目vue create project

1.3 批注

Node.js 用途

构建 Web 应用程序: Node.js 可以轻松地构建基于 HTTP 协议的服务器，处理 HTTP 请求和响应，可以用于开发 Web 应用程序，如社交网络、实时聊天应用程序等。
开发 HTTP 服务器: Node.js 也可以用于开发创建 HTTP 服务器的工具，如静态资源服务器、反向代理服务器等。
构建命令行工具: Node.js 提供了一些内置模块，可以用于构建命令行工具。
开发桌面应用程序: 借助 Node.js 的包管理系统，可以轻松地管理应用程序的依赖和模块。
实现消息队列: Node.js 也可以用于实现消息队列，以处理大量的异步任务。

npm (nodepackage manager),即Node包管理器和 cnpm 的区别

npm是node官方的包管理器。cnpm是个中国版的npm,是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的
cnpm i :速度快但有时候会导致样式不兼容，npm i :速度慢基本不会出什么问题

npm i 与npm install -S,-D,-g区别

npm i是npm install的简写。（区别：npm i会帮助检测与当前node版本最匹配的npm包版本号）
运行 npm install module_name 安装插件，用npm install 初始化项目时不会下载模块。
-S是–save的简写。npm i module_name -S（等同于npm i module_name --save）安装插件是需要发布到生产环境的
-D是-dev的简写。 npm i module_name -D（等同于npm i module_name --save-dev）安装插件只用于开发环境，不用于生产环境.
-g将模块安装到全局。 npm i module_name -g

npx

npx 的全称是（node.js package execute），node.js 的包执行工具
npx 会自动查找当前依赖包中的可执行文件，如果找不到会去 PATH 里找，依然找不到就会帮你安装。

yarn

Apache Hadoop YARN （Yet Another Resource Negotiator，另一种资源协调者）是一种新的 Hadoop 资源管理器

二、elementui网站快速成型工具

elementui官网链接https://element.eleme.cn.

2.1 安装

# 全局安装（一般用全局方便）
cnpm i element-ui -S #OR
# 按需使用
npm install babel-plugin-component -D

如按需应用需要在babel.config.js中增加插件

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

2.2 修改App.vue，新建Home.vue

App.vue

<template><div id="app"><Home/></div>
</template><script>
import Home from './components/Home'
export default {name: 'App',components: {Home}
}
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
</style>

Home.vue

<template><div class="hello"><h1>hello</h1><el-button type="">button</el-button><el-button type="primary">button</el-button><el-button type="danger">button</el-button><el-button type="info">button</el-button><el-button type="success">button</el-button></div>
</template><script>
export default {name: 'Home'  
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.3 启动项目

npm run serve #OR
yarn serve

在这里插入图片描述
插件分离

三、sass

sass官网链接:https://www.sass.hk/.

#卸载sass
npm uninstall node-sass
#安装sass（cnpm i sass-loader@7 node-sass@4 -S）指定版本时如果node版本过高会安装失败
npm i -D sass

scss和less可以切换如切换后报错安装less

//legacy-peer-deps命令用于绕过peerDependency里依赖的自动安装；它告诉npm忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题
npm install less #安装失败可尝试添加--legacy-peer-deps
//npm包管理器中快速修复漏洞(未提示不执行)
npm audit fix --force

测试成功
在这里插入图片描述

四、 reset.css（重置网页的默认样式）

官网参考连接:https://meyerweb.com/eric/tools/css/reset/.
在这里插入图片描述
App.vue中使用重置样式

在这里插入图片描述

五、Font Awesome

官网连接https://fontawesome.com.cn/.

5.1 安装

cnpm i -D font-awesome

5.2 main.js导入

import 'font-awesome/css/font-awesome.min.css'

5.3 使用

  <i class="fa fa-users"></i>

5.4 验证

在这里插入图片描述

六、axios和路由安装使用

6.1 axios

官方解释：axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中（感觉没啥用）
简单理解：axios负责与后端交互，get、post后端接口信息，相当前后端的窗口

6.2 安装

cnpm i axios -S
# vue-router 4 以后的版本只适合 vue3，用在vue2.0+会报错
cnpm i vue-router@3.5.3 -S# 如安装错误uninstall失败可使用强制卸载
npm i --force 无视冲突，强制获取远端npm库资源

6.3 main.js导入,设置挂载原型，router放置在初始化vue中

在这里插入图片描述

6.4 配置路由，这里也单独分块方便后续管理

在这里插入图片描述

6.5 使用

在这里插入图片描述

6.6 验证路由

在这里插入图片描述

七、懒加载和异步组件加载

            //路由懒加载//component: () => import('@/components/Home')//异步组件加载component: resolve => require(['@/components/Home'],resolve)

在这里插入图片描述