Vue2.0项目搭建流程(一步一步教你如何初始化一个前端项目)

1.环境准备

1.win+r在cmd终端界面输入node -v,检测node环境是否安装成功
在这里插入图片描述
2.cmd终端界面输入vue -V,检测前端脚手架@vue/cli是否安装成功
在这里插入图片描述
没有显示则终端输入以下指令

//以下内容三选一
cnpm install -g @vue/cli
npm install -g @vue/cli
yarn global add @vue/cli

2.项目初始化

1.选择你希望创建项目的位置,输入cmd回车进入windows终端
在这里插入图片描述
2.输入vue create "你的项目名称"创建vue项目,回车
在这里插入图片描述
3.选择最下面这个,回车
在这里插入图片描述
4.选择自己需要的初始化模块(推荐取消Babel,选中Router,具体根据自己的需求来),回车
在这里插入图片描述
5.选择2.x版本,回车
在这里插入图片描述
6.电脑端输入n
在这里插入图片描述
7.选择第一个默认即可(建议选择package.json)
在这里插入图片描述
8.继续输入n,回车
在这里插入图片描述
9.出现以下界面vue2项目创建成功
在这里插入图片描述

3.删除不必要的初始化文件

1.如下图从左到右删除不必要的文件
在这里插入图片描述
2.运行项目(ctrl+`进入终端),输入npm run serve
在这里插入图片描述
启动成功,后续项目内容根据自己的需要配置路由信息和文件

  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 创建项目文件夹,使用npm init初始化项目,生成package.json文件。 2. 安装Vue.jsVue CLI(命令行界面)。 npm install vue npm install -g vue-cli 3. 使用Vue CLI创建项目vue init webpack my-project 4. 进入项目文件夹,安装依赖。 cd my-project npm install 5. 启动项目,查看是否成功。 npm run dev 6. 添加路由管理器vue-router。 npm install vue-router 7. 在src文件夹中创建views文件夹,存放所有页面组件。 8. 在src文件夹中创建components文件夹,存放所有公共组件。 9. 在src文件夹中创建assets文件夹,存放所有图片、样式和字体文件。 10. 在src文件夹中创建utils文件夹,存放所有工具函数。 11. 在src文件夹中创建config文件夹,存放所有配置文件。 12. 在src文件夹中创建store文件夹,存放所有状态管理文件。 13. 在src文件夹中创建App.vue文件,作为根组件,包含所有其他组件。 14. 在src文件夹中创建main.js文件,作为项目入口文件,配置路由、状态管理、插件等。 15. 在src文件夹中创建router文件夹,存放所有路由配置文件。 16. 在src文件夹中创建store文件夹,存放所有状态管理文件。 17. 在src文件夹中创建plugins文件夹,存放所有插件文件。 18. 在src文件夹中创建filters文件夹,存放所有过滤器文件。 19. 在src文件夹中创建mixins文件夹,存放所有混入文件。 20. 在src文件夹中创建directives文件夹,存放所有指令文件。 21. 在src文件夹中创建services文件夹,存放所有服务文件。 22. 在src文件夹中创建mock文件夹,存放所有mock数据文件。 23. 在根目录下创建vue.config.js文件,配置webpack,例如添加别名、打包选项等。 24. 在根目录下创建.babelrc文件,配置babel转码规则,例如添加ES6转ES5的插件。 25. 在根目录下创建.postcssrc.js文件,配置postcss转码规则,例如添加autoprefixer插件。 26. 在根目录下创建.editorconfig文件,配置编辑器格式化规则。 27. 在根目录下创建.eslint.js文件,配置eslint规则。 28. 在根目录下创建.prettierrc文件,配置prettier规则。 29. 在根目录下创建README.md文件,编写项目介绍、使用方法等文档。 30. 在根目录下创建LICENSE文件,添加开源协议。 这样,一个基于vue2.0前端框架就搭建好了。在实际开发过程中,可以根据项目需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值