vue写项目流程简单总结

63 阅读3分钟

1_ cli创建项目 ‌使用可视化方式创建项目文件夹,在你的文件夹根目录下打开cmd输入 vue ui 回车 ‌浏览器打开创建网页后,点击创建,选择四个,选择第四个,点击确认,然后等待创建完成(详细参考前面文章)

2_ 启动默认项目 ‌完成以后,把项目文件夹拖到vscode中,打开一个终端,输入npm run serve运行开启项目

一起认识vue项目文件夹的各个目录

image.png

3_ 删除默认文件 ‌然后,删除默认的东西,删除默认的三个组件,就是以.vue结尾的三个组件,然后删除路由index.js里面的和这三个组件相关的东西,再删除App.vue里面的东西,只留一个#app的div即可,此时打开不报错就删完了

4_ 添加全局样式文件及样式初始化 ‌然后,在静态资源文件夹assest里面创建一个css文件夹,当然,也可以在src目录下新建,里面写globel.css用来写全局样式,里面写html.body,#app高度设置为100%,因为默认这三个东西是没有高度的,然后在mainjs中导入这个全局css文件才能生效

5_ views目录下新建页面,写页面 ‌然后,就在views中创建页面去写页面即可 ‌写页面内容的时候,就可能用到组件传值,vuex,动态路由传参,组件复用,以及各种vue指令等,单页面的写法,如何写一个方法,如何调用,如何请求一个数据,怎么显示在页面上,什么时候使用钩子函数等

‌第三方组件库的使用,导入之后看官方文档,照着api写就行(详细参考前面文章)

6_ 页面跳转路由配置 ‌写完页面就去路由文件里面导入,然后配置路由规则,然后,在App.vue里面写上路由占位符 ‌到此为止,页面就显示出来了,根据你的路由规则显示对应的views中页面,实现了页面的切换(详细参考前面文章)

7_ 公共组件的使用 如果某个组件是多次复用的,那么就把它写在components目录下,写好组件以后,在需要用的页面导入,注册,使用即可(前面有文章参考)

8_ 项目打包 cli4版本的项目打包:

  1. 项目根目录下新建一个vue.config.js的文件,里面拷贝上面那段代码
  2. 然后再根目录下执行npm run build 回车 等待打包完成
  3. 完成以后项目就会生成一个dist文件,这个dist文件就是打包好的项目了。预览项目:打开此文件直接进入index.html就可以看到自己写的项目效果了

‌主要还是开始时的配置,以及对脚手架里面的文件运行流程的理解,页面没啥要写的,就是多看看ui组件库的api ‌ ‌记住几句话

  • ‌‌始终只显示了App.vue这一个组件,想要显示到页面必须通过App.vue来显示‌
  • 所有用到的东西都先在mainjs里面导入并注册一下‌
  • 路由谁先要把谁导入到路由里面,还有一种方式是路由懒加载的‌
  • 路由规则配置完记得在App.vue里面写路由占位符