Front-end——vue-cli3项目创建

大学实习期间,学习了前端的相关知识,之前也都是看看文档,直接引入官方的js,写写简单的demo,没写过项目。最近学习都最后,开始学习VUE,准备用vue-cli3写项目,因此写下此篇博客,记录vue-cli创建项目的流程。

一、安装

1、vue-cli的包名称是由vue-cli改成 @vue/cli。

使用下列命令安装这个新的vue-cli包:npm install -g @vue/cli

2、检查版本是否正确

vue -v

二、项目创建

1、在文件夹下创建项目

注:这里千万注意切换到自己的目录下,新建项目,vue create 项目名

2、选择默认(default)还是手动(Manually)

按键盘上下键可以选择默认还是手动,如果选择了default,一路回车执行下去就行了,目前我是用的是手动

3、选择配置,看个人项目需求

空格键是选中或者取消,A是全选

  1. TypeScript支持使用TypeScript书写源码
  2. Progressive Web App(PWA)Support PWA支持
  3. Router支持vue-router
  4. Vuex:支持Vuex
  5. CSS Pre-processors 支持CSS预处理器
  6. Linter / Formatter 支持代码风格检查和格式化
  7. Unit Testing 支持单元测试
  8. E2E Tesing 支持E2E测试

根据项目需求,我的选择是这样的:

回车,询问是否保存这次配置

4、CSS的预处理我选择的是 less

5、配置文件存放位置

  • 第一个是独立文件夹位置
  • 第二个是在package.json文件里

6、创建成功,等待安装

7、装好之后,启动项目

cd my_test     //进入到项目根目录
npm run serve  //启动项目

猜你喜欢

转载自blog.csdn.net/weixin_42067873/article/details/112752641