项目实战1

本是古典何须时尚 2024-03-27 11:04 72阅读 0赞

### 一、前端项目的创建 ###

#### 一、安装vue脚手架 ####

安装脚手架Vue—CLI，可以为单页面应用快速搭建繁杂的脚手架，它的安装命令是

> cnpm install -g @vue/cli

![c48da4be385e492b9ef0c39bf081c0aa.png][]

安装成功查看版本信息

![b8d41012ebcc4416a5e7c2fcb50a1b2b.png][]

#### 二、安装Nodejs ####

[下载 | Node.js 中文网 (nodejs.cn)][_ Node.js _ _nodejs.cn]

vue项目需要通过nmp命令来创建和启动，咱们安装的NodeJS仅仅就是为了获得这个命令而已。

![e22a437ecdae4f2ba078ff1aeea0e6bb.png][]

安装成功

![87d4564f91954616894a93245a8e4694.png][]

#### 三、创建项目 ####

到对应的文件夹地址栏输入cmd

然后输入 vue create xxx

![05200aa463dd43d59abdf971e67a0753.png][]

vue的配置

选择安装Vue3的版本进行一个安装

![e8c618571c74403295c2c9e4eb692e52.png][]

安装成功

输入蓝色的字就可以启动了

![8deaa3c78d3240f0b67bba2651659ddb.png][]

#### 四、项目目录介绍 ####

使用vscode打开新建的文件夹

![bbaf60e8604e430a9f5a6ce34d104e68.png][]

1. node modules 模块包public 公共资源  
2. src 项目目录  
3. assets 静态资源  
4. components 组件  
5. App.vue 根组件、  
6. main.ts 根函数入口，全局配置生效的地方  
7. package.json 项目配置文件，项目的标题、版本，模块的版本等信息

#### 五、安装Typescript ####

安装：**vue add typescript**

**只有第一个选择no其他的都选yes**

接下来安装成功

![5338c758c36d49fdabb0f427b9c5b966.png][]

#### 六、安装scss ####

**安装命令**：npm install sass-loader node-sass --save

发现安装会报错

![943658d15b10465989d1aaef8507d086.png][]

重新查了查原因

![810e4ca7c17744f09a5d3559edb7b163.png][]

所以通过镜像重新安装一遍

**解决方法：**

1、首先安装淘宝镜像

> $ npm install -g cnpm --registry=https://registry.npm.taobao.org

2、 用cnpm重新安装一次

> cnpm install node-sass --save-dev

> cnpm install sass-loader --save-dev

这样就解决了

然后进入vscode打开终端 输入npm run serve

看看是否能运行

![59838b5835c14cc0acf9a36a45c85551.png][]

#### 七、Element Plus使用 ####

一、框架介绍

Element Plus，基于Vue3，面向设计师和开发者的组件库 ([一个 Vue 3 UI 框架 | Element Plus][Vue 3 UI _ _ Element Plus])

二、安装命令

> cnpm install element-plus -S

在文件夹输入cmd命令

![b61c9383afc84498b21dceda3a18bbb5.png][]

![8b675c3340fd448a87e6f1a52b1382ed.png][]

三、项目中导入

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)

[c48da4be385e492b9ef0c39bf081c0aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/dc6b5c95d4534622a3be85b6915f00b2.png
[b8d41012ebcc4416a5e7c2fcb50a1b2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9d126063a88e45f2925eac8db1655670.png
[_ Node.js _ _nodejs.cn]: http://nodejs.cn/download/
[e22a437ecdae4f2ba078ff1aeea0e6bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/664fbebb2848445c88af05d4507cfc90.png
[87d4564f91954616894a93245a8e4694.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d910bc1da3a74ad398e407ebb5d31aab.png
[05200aa463dd43d59abdf971e67a0753.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/59b54bbf6132432f8d3a7a386b057d5a.png
[e8c618571c74403295c2c9e4eb692e52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ff8827ce25f84daa8d3a7a1b46cdc01b.png
[8deaa3c78d3240f0b67bba2651659ddb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9a48a72c10d248ccbc5b837ae56ae88e.png
[bbaf60e8604e430a9f5a6ce34d104e68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3cac3fb6910f48249208e2884a2767ca.png
[5338c758c36d49fdabb0f427b9c5b966.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5e42b10b7f844ee7abc33d891148f934.png
[943658d15b10465989d1aaef8507d086.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a232335dd51d411f8e231aadd9702c62.png
[810e4ca7c17744f09a5d3559edb7b163.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f6804ae2dff44798aeb7e81c58de7736.png
[59838b5835c14cc0acf9a36a45c85551.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3de86ea8049e48588270ed55e79c6ee7.png
[Vue 3 UI _ _ Element Plus]: https://element-plus.gitee.io/zh-CN/
[b61c9383afc84498b21dceda3a18bbb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/459a3ba2207647989828ad73968eb8bf.png
[8b675c3340fd448a87e6f1a52b1382ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b694e79b88f84e9ebe380fd9720eac0f.png