Vue3项目创建

wwh今晚要早睡
437 阅读4分钟

vue3项目创建

准备工作:(juejin.cn/post/743180…)

方法一:安装 Vite创建vue3项目

1、安装 Vite

打开cmd用管理员身份运行

npm install -g create-vite-app

2、使用 vite 创建

  • vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，

  • 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

    • 快速的冷启动，不需要等待打包操作；
    • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
    • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

第一步：在目录中打开cmd(或者在VS code中找到目录右键点击在集成终端中打开)

运行命令创建项目：

npm init vite

第二步：输入项目名称

image.png 第三步：选择vue项目

image.png 第四步：选择TypeScript语言回车 image.png

注意:使用此方法运行项目需要node版本高一点(vue2项目node版本是14.19.1,在这里运行不了,把node换成了18.20.0)

方法二:使用脚手架创建vue3项目

此方法与vue2创建项目差不多,在配置项中多了几个步骤,中间多了几个判断是否,我们选择是(y),在最后一个时候保存设置选择否(n)即可,具体差异如下

image.png

image.png

image.png

image.png

方法一:创建速度快,运行项目快,但是里面许多东西没有配,比如路由,vuex等很多需要自己去写

项目相关(目录解析)

1 项目创建完成之后，在项目的里面新建终端/cmd，注意一定是在根目录下，运行项目，运行项目的指令是什么：npm run 指令，注意每个项目运行的指令可能不一样，所以要到package.json文件中去看

2 项目文件的介绍：

  • node_modules：项目的依赖，项目中用到的所有插件。框架都在这个文件夹下。注意这个node_modules不要打包发给别人，其次上传到git仓库的时候不要把他传上去。所以当别人拉取代码的时候，需要安装以下环境依赖，项目的框架：npm i/npm install

  • dist目录：当你去执行npm run build的时候，会自动生成文件夹，这个文件夹里面所有的内容都是项目压缩后的文件。注意必须放到服务器环境中才能运行，本地环境不行。

**项目开发完了要将开发的代码发给甲方，或者有不会的问别人发项目的时候发的是开发版本非压缩版本。当后端跟你说发布到线上服务器，那么发给后端的文件是dist文件

  • public:原生态执行打包命令之后里面的内容不会被打包，也就是public是个安全区，里面的东西不会被压缩成一团，public以外的文件都会被压缩
  • src:操作部分，项目中所有的能用到的素材及其组件都在src目录下
    • assets：静态资源目录，放全局的css，js，图片
    • commponents：放公共组件的，可以复用的组件
    • router：配置路由，给组件配置一个路径，用来点击的时候跳转并显示这个组件
    • views：存放组件，非公共组件，比较大的组件，不能重复利用的组件
    • App.vue：整个项目中最大的组件，所有的组件都在App.vue中显示
    • main.js:项目的入口，项目中所有的组件都会加载这个js文件
      • 1 放置项目中经常会用到的插件或者框架
      • 2 存储全局变量
  • vue.config.js:项目的配置文件，配置跨域代理，项目的端口号等
  • README.md:项目的说明文档
  • package.json:基础配置文件，存储记录了项目中所有用到的框架/插件，还可以修改运行命令
  • package-lock.json:项目的详细配置文件，里面存储了所有用到的框架/插件以及插件中的插件，框架中的框架，没什么卵用，有的时候必须删掉才能安装环境依赖，因为这个文件是根据你当前电脑的node版本生成的，一般不删除在自己电脑上生产的这个文件，别人生成的删掉就可以了
  • jsconfig.json:vscode配置文件，开发者可以在vscode中获取代码提示，自动补全代码
  • babel.config.js:配置文件，允许你在这个项目中可以使用es6以下版本的js
  • gitignore:可以配置上传仓库的时候过滤文件/文件夹

组件：vue项目中只有一个html，所以vue又称之为单页面开发，我们跳转的不是页面是组件，所谓的组件就是页面的功能模块，我们可以把一个页面中的每个功能单独拿出来，重复使用，多页面开发指的是一个项目有多个html，比如我们之前做的js项目

avatar
文章
阅读
粉丝