大学实习期间,学习了前端的相关知识,之前也都是看看文档,直接引入官方的js,写写简单的demo,没写过项目。最近学习都最后,开始学习VUE,准备用vue-cli3写项目,因此写下此篇博客,记录vue-cli创建项目的流程。
一、安装
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
node.js安装地址:下载 | Node.js 中文网
1、vue-cli的包名称是由vue-cli改成 @vue/cli。
使用下列命令安装这个新的vue-cli包:npm install -g @vue/cli@3.10.0
2、检查版本是否正确
vue -v
二、项目创建
1、在文件夹下创建项目
注:这里千万注意切换到自己的目录下,新建项目,vue create 项目名
2、选择默认(default)还是手动(Manually)
按键盘上下键可以选择默认还是手动,如果选择了default,一路回车执行下去就行了,目前我是用的是手动
3、选择配置,看个人项目需求
空格键是选中或者取消,A是全选
- TypeScript支持使用TypeScript书写源码
- Progressive Web App(PWA)Support PWA支持
- Router支持vue-router
- Vuex:支持Vuex
- CSS Pre-processors 支持CSS预处理器
- Linter / Formatter 支持代码风格检查和格式化
- Unit Testing 支持单元测试
- E2E Tesing 支持E2E测试
根据项目需求,我的选择是这样的:
回车,询问是否保存这次配置
4、CSS的预处理我选择的是 less
5、配置文件存放位置
- 第一个是独立文件夹位置
- 第二个是在package.json文件里
6、创建成功,等待安装
7、装好之后,启动项目
cd my_test //进入到项目根目录
npm run serve //启动项目