涉及软件版本 :
Node v14.17.0; npm 6.14.13; vue 3.2.13;  @vue/cli 5.0.8
cmd查看版本node:node -v;npm:npm -v;@vue/cli:vue -V(v大写)
Vue查看版本:
一:安装node、npm
1.检查Node,未安装【https://nodejs.org/en/】访问网址下载最新版安装
2.检查npm,node自带npm但是不一定为最新版本,可以根据【npm install -g npm】命令更新。
总结:"WIN+R" 输入cmd 在窗口输入node -v、npm -v查看是否安装及版本
二:创建vue脚手架
a)安装镜像
1.在国内下载网络会出问题,建议使用淘宝镜像,
  配置镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
  1.1检查cnpm安装是否成功:cnpm -v
b)全局安装vue-cli
1.用cnpm安装vue脚手架:cnpm i -g @vue/cli(其中i是Install安装的简写,g是global全局的简写)。
2.或者用npm安装vue脚手架:npm i -g @vue/cli (cnpm 安装环境和依赖包会更快 推荐使用cnpm)

怎么看一个项目是不是maven 怎么看一个项目是不是vue_Vue

三:创建Vue项目

1.使用Vue脚手架创建vue项目: vue create cmsvue(cmsvue是项目名称,另外项目名称不可以存在大写字母)

    

怎么看一个项目是不是maven 怎么看一个项目是不是vue_怎么看一个项目是不是maven_02

2. 选择方式安装 

      

怎么看一个项目是不是maven 怎么看一个项目是不是vue_App_03

3.选择第三项自定义添加【Manually select features】  

   

怎么看一个项目是不是maven 怎么看一个项目是不是vue_怎么看一个项目是不是maven_04

  • Default([Vue 3] babel, eslint):vue3的项目,只包含js编译器babel,代码检测工具eslint。
  • Default([Vue 2] babel, eslint):vue2的项目,只包含js编译器babel,代码检测工具eslint。
  • Manually select features:自定义添加选择功能

4.选择配置,一般项目勾选下图选项即可

    

怎么看一个项目是不是maven 怎么看一个项目是不是vue_Vue_05

  空格键是选中与取消,A键是全选

  • Babel:js编译器
  • Typescript:js的超集,支持使用 TypeScript 书写源码
  • Progressive Web App Support:PWA的中文名叫做渐进式网页应用,PWA 不是特指某一项技术,而是应用了多项技术的 Web App。其核心技术包括 App ManifestService WorkerWeb Push,等等(其余请自行搜索,此处简单介绍)
  • Router:vue的路由(vue-router)
  • Vuex:vue的状态管理
  • CSS Pre-processors:css的预处理器
  • Linter/Formatter:代码风格检查与格式化
  • Unit Testing:单元测试
  • E2E Testing:端对端测试( E2E)

5.选择Vue版本(这里我选的是Vue3)

    

怎么看一个项目是不是maven 怎么看一个项目是不是vue_App_06

6.路由采用history模式,输入Y:

    

怎么看一个项目是不是maven 怎么看一个项目是不是vue_App_07

7.选择第一项CSS预处理器

   

怎么看一个项目是不是maven 怎么看一个项目是不是vue_Vue_08

8.选择第三个标准配置【ESLint + Standard config】具体为啥,我信官网 

   

怎么看一个项目是不是maven 怎么看一个项目是不是vue_怎么看一个项目是不是maven_09

9.选择第一个,编写代码时提示错误:

    

怎么看一个项目是不是maven 怎么看一个项目是不是vue_怎么看一个项目是不是maven_10

  • lint on save:代码文件中有代码不符合 lint 规则时,会在 compile 阶段提示 warning。如果出现了语法错误,会直接在页面上显示 error
  • lint and fix on commit:代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候,通过 githook,在 pre-commit 阶段执行 lint 和 fix 操作,自动帮我们把有语法错误的地方修改为符合规范。

10.Babel、ESLint 等的配置存放选择都存放在package.json中,选择第二项:

    

怎么看一个项目是不是maven 怎么看一个项目是不是vue_Web_11

11.将其保存为未来项目的预设:可以根据自己设置 Y为保存。

VUEDemo为预设名称,下次创建项目会多出VUEDemo选项,无需再次配置即可直接使用

      

怎么看一个项目是不是maven 怎么看一个项目是不是vue_App_12

12.回车等待安装

      

怎么看一个项目是不是maven 怎么看一个项目是不是vue_怎么看一个项目是不是maven_13

四:启动项目
1.cd 到项目目录下:cd cmsvue.
2.输入项目启动命令:npm run seve
3.根据生成的链接可以访问到项目

  

怎么看一个项目是不是maven 怎么看一个项目是不是vue_Vue_14

 

怎么看一个项目是不是maven 怎么看一个项目是不是vue_怎么看一个项目是不是maven_15