前端搭建

素颜马尾好姑娘i 2024-03-26 14:42 83阅读 0赞

### **一、创建一个Vue应用** ###

**前提：安装了npm.js**

![31da0fb68295c7f88a374e525f5b2891.png][]

在命令行中运行以下命令

vue create xxxxx

![b7f3690786e47fe34c37885a1521b269.png][]

![40204f567500da8c50f106db581e0545.png][]

*  选择版本

**选择最后一个手动操作**

![c397a340bdd0f3262d07ae03c91e85ff.png][]

![8a03f8ec6324c4e1a45bcb2bd61b4ad5.png][]

![638986a71afb41f79e1e8b33c171c129.png][]

![f492d4eb23608cecaedf238e9d1a453c.png][]

![acc5cca07a6b54d4dd50b2f93170e703.png][]

![8260e56dec816aa365bff385aea4ee0e.png][]

![35c52b093d1d8feff923a2f1fef27c3c.png][]

1.  Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。

1.  TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。。

1.  Progressive Web App (PWA) Support：渐进式Web应用程序

1.  Router ：vue-router（vue路由）

1.  Vuex ：vuex（vue的状态管理模式）

1.  CSS Pre-processors ：CSS 预处理器（如：less、sass）

1.  Linter / Formatter：代码风格检查和格式化（如：ESlint）

1.  Unit Testing ：单元测试（unit tests）

1.  E2E Testing ：e2e（end to end） 测试

✔ Project name: … <your-project-name>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes
    
    Scaffolding project in ./<your-project-name>...
    Done.

我们可以都选No

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd <your-project-name>
    > npm install
    > npm run dev

**安装脚手架**

npm install -g @vue/cli

\-g代表了全局安装

安装完成后，使用

vue --version

显示版本号来测试vue是否安装成功。

![2d6b91db272708d2fb5893e86eed21c6.png][]

**目录**

![3faa72bc6037999670fecb6ff79b77ff.png][]

[31da0fb68295c7f88a374e525f5b2891.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e3a62636284a4752af92105ba9e00bbf.png
[b7f3690786e47fe34c37885a1521b269.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/16955d04f1d74f0182cdacfb50c7a64e.png
[40204f567500da8c50f106db581e0545.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/62fbcfd5e37647d0b0d96d6f9aa92c11.png
[c397a340bdd0f3262d07ae03c91e85ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/07b6e0dce71f4e5ea8c309e11e9b3856.png
[8a03f8ec6324c4e1a45bcb2bd61b4ad5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f6370e2a70724717a6d97723fd0d5682.png
[638986a71afb41f79e1e8b33c171c129.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f6d5336cb5f145319fd7b5ed90708b4a.png
[f492d4eb23608cecaedf238e9d1a453c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/823274659c174b7197189bda44a9e202.png
[acc5cca07a6b54d4dd50b2f93170e703.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/81ae8b53f4464a94a8a4ccc95c36e3ca.png
[8260e56dec816aa365bff385aea4ee0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f028799542e6487792e1d191ce6b7b28.png
[35c52b093d1d8feff923a2f1fef27c3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ae2dcec596b84c11918bbc5e7b0873c8.png
[2d6b91db272708d2fb5893e86eed21c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/73a448362186413c935c59d49ba33958.png
[3faa72bc6037999670fecb6ff79b77ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/164a1f0f6069401eaa9b42ded6b8fcda.png