当前位置： 移动技术网 > IT编程>网页制作>CSS > VUE从入门到放弃（项目全流程）————VUE

VUE从入门到放弃（项目全流程）————VUE

2019年09月22日  | 移动技术网IT编程  | 我要评论

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？————————-作者？

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

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

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

  8. ？setup e2e tests with nighwatch？(y/n) ( e2e测试，个人觉得不安装选择n )

  9. ？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文件夹。

img

二.代码内容（）

在这里插入图片描述

目录：↑

  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. 其他的还没接触到。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网