欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

VUE从入门到放弃(项目全流程)————VUE

程序员文章站 2022-08-08 15:48:07
VUE从入门到放弃(第一天)——整体流程 先想想一个项目,vue项目是从什么到什么,然后再什么的?那是什么呢? 1. 搭建 ( vue cli) 2. 代码内容 3. 运行 4. 封装 5. 成品 一.搭建(脚手架vue cli) 首先node.js,npm,vue cli(脚手架)一定要有,这里不 ......

vue从入门到放弃(第一天)——整体流程

先想想一个项目,vue项目是从什么到什么,然后再什么的?那是什么呢?

  1. 搭建 ( vue-cli)
  2. 代码内容
  3. 运行
  4. 封装
  5. 成品

一.搭建(脚手架vue-cli)

首先node.js,npm,vue-cli(脚手架)一定要有,这里不细讲。装就完事了。

进想放的文件夹,vue init webpack xxxvue(项目名称,随你取),配置:

  1. project name (my-vue)?————————-项目名称(my-vue)?

  2. project description (a vue.js project)————————-项目说明(vue.js项目)?

  3. author?————————-作者?

  4. install vue-router? (y/n)————————-安装vue路由

  5. use eslint to lint your code? (y/n)(启动校验??就是查查你的代码错误,不开也行,开也行。)

  6. ?set up unit tests (y/n) 敲n回车既可 ( 单元测试, 个人觉得不安装选择n )

  7. ?setup e2e tests with nighwatch?(y/n) ( e2e测试,个人觉得不安装选择n )

  8. ?should we run npm install for you after the project has been created? (recommended) (use arrow keys) 选使用npm

在项目夹的命令行:npm install(安装依赖,以后就可以为所欲为的npm i xxx了)

xxxxvue文件夹中多出一个node_modules文件夹。

VUE从入门到放弃(项目全流程)————VUE

二.代码内容()

VUE从入门到放弃(项目全流程)————VUE

目录:↑

  1. dist是经过npm run build打包过后的文件,文件非常小。dist正常无法直接打开需要通过服务器,云服务器也行,本地用phpstudy啥的也行。(后面打包的时候再提一下)
  2. package.json和config:都是配置文件
  3. assets:图片呀,资源呀,这些都存放在这里。
  4. node_modules:npm后的资源,都在里面,想要的ui库直接npm i xxx库。
  5. src/components:组件存放处。先要啥组件(例:helloworld.vue),往这一放,就可以调用了
  6. src/router:路由,
  7. build:启动打包文件。

三.运行(npm run dev)

先运行命令: npm run dev

加载,搞定!

四.封装(npm run build)

dist是经过npm run build打包过后的文件,文件非常小。dist正常无法直接打开需要通过服务器,云服务器也行,本地用phpstudy啥的也行。

也可以去封装做成一个h5 app。使用云打包即可。

五.成品

  1. 通过放置在服务器,云服务器也行,本地用phpstudy啥的也行。
  2. 通过云打包,变成一个app。
  3. 其他的还没接触到。