Vue新建单页面应用

1.vue/cli新建

npm install -g @vue/cli   这样就可以在全局安装vue/cli，

vue -V     输入命令，查看安装是否成功

能出现对应的vue/cli的版本，即为安装成功。

如果安装明明成功了，但是无法显示版本号，并且提示vue not ...command，则为环境变量需要配置。

npm list -g

查看全局环境下，包安装路径，复制其，配置电脑的环境变量，重启cmd即可。

vue/cli安装成功后，即可新建项目

2.命令行新建

vue create 项目名称  中间步骤按需选择

O Babel 把es6等高端代码转成低端代码，供低版本浏览器使用
O TypeScript TS微软新出的一门语言，可以用来生成js
o Progressive Web App (PWA) Support 移动端app支持
o Router 路由
o Vuex 一种统一状态管理工具（存数据的）
o CSS Pre-processors css预处理器支持（可以用来把less等高端css语言转成普通css）
• Linter / Formatter （代码风格）
o Unit Testing 测试
O E2E Testing 测试

使用vite新建

速度更快，体积更小，仅支持vue3.x，不支持2.x，并且目前还不是很稳定，正在完善中，建议将来使用。

npm init vite-app 项目名称

如果报错：

 

 输入y进行安装create-vite-app即可

项目目录：

babel.config.js babel配置文件
dist 生成的用于上线的低端代码
jsconfig.json js配置文件
node modules 包仓库
package-lock.json package的升级版，把包固定在某个版本
package.json 项目配置文件
public 公共文件
README.md
src 程序员开发写的内容
App.vue 主组件
assets 静态文件
components 组件盛放文件夹
main.js 主要js（入口js）
vue.config.js vue配置文件