匹配系统-进度一-脚手架初始化前端项目

进度一·脚手架初始化前端项目

目录

进度一·脚手架初始化前端项目

1、前端项目初始化

1.1、用脚手架初始化项目

1.2、下载webstorm

1.3、在webstorms里打开新建的项目

1.4、整合组件库

---

1、前端项目初始化

1.1、用脚手架初始化项目

• VUE CLI Vue CLI
• Vite 开始 {#getting-started} | Vite中文网

a.在你想放文件的位置打开终端

b.使用Yarn

yarn create vite

  

没安装yarn：

先安装node:安装教程推荐http://t.csdnimg.cn/yF8Ax

再安装yarn:【以管理员身份运行cmd】

npm install -g yarn
yarn -v

   

这里yarn create vite我遇到了“yarn报错文件名、目录名或卷标语法不正确”，原因可能是yarn的命令目录bin与其全局安装位置不在一个文件夹下导致，yarn的全局安装位置是默认安装在C盘的。具体可见：http://t.csdnimg.cn/m1E1O

yarn global bin //查看yarn的命令目录 yarn global dir //查看yarn的全局安装目录 // 解决办法yarn config set global-folder "D:\nvm\yarn\yarn_global"yarn config set cache-folder "D:\nvm\yarn\yarn_cache"

   

此外还遇到了权限不足，很奇怪忘记那个问题了，我以管理员身份打开cmd运行：

yarn add vite //全局，然后再回项目文件位置yarn create vite就好了

最后框架选择vue,typescript。

1.2、下载webstorm

官网地址：WebStorm: The Smartest JavaScript IDE, by JetBrains

1.3、在webstorms里打开新建的项目

package.js：定义项目的依赖。

dev:在本地开发环境，启动一个可以实时更新的项目。

build:最后项目上线，对项目进行一个打包【先将代码装成javascript，然后再执行build】。

preview:项目上线前提前预览。

vite独立于框架之外，对于每个框架提供一个额外的适配，通过插件的方式，使整个框架、vite构建工具通用性更强。

a.在terminal安装npm或者yarn

npm install

terminal打不开local可以在settings->tools->terminal->shell path设置为cmd的地址。

b.点击dev旁边的三角试试运行。

1.4、整合组件库

a. vite并不认识vant，整合组件库让vite认识vant。

b. 官网地址：Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

c. 看“快速上手”:npm不行就试试yarn

d. vite.config.js:vite构建工具的配置文件，可以在这整合其他的框架或配置其他的插件。性能优化的“银弹”。

e. main.ts:前端项目的入口。从vue引入createApp,来创建一个app的组件，.mount将vue文件和dom元素关联起来，即将组件挂载到某个页面上，index.html是一面墙，App.vue是墙贴，将墙贴贴到某一个部分，index.html中"id='app'"和main.ts中'#app'关联。'#app'的#用来指定id。

f. 安装vant后引入组件Button，从createApp先获得一个app，使用Button再挂载。

g. 在App.vue使用button