1.安装node.js
官网下载地址 node.js
安装 Node.js 淘宝镜像加速器( cnpm )
npm install cnpm -g
安装 vue-cli
npm install -g @vue/cli
测试是否安装成功
vue --version
2.创建项目
打开Windows Power Shell(管理员模式运行)
vue create test
如果出现如下报错信息,表示系统禁止运行未知脚本
set-ExecutionPolicy RemoteSigned
# 选择Y
2.1.开始创建项目
Default ([Vue 3] babel, eslint):
这个选项会使用Vue 3作为项目的基础框架版本。
使用Babel进行代码转译,允许你使用最新的JavaScript语法和特性,并确保项目的兼容性。
启用了ESLint,用于代码规范检查,以确保代码质量和一致性。
Default ([Vue 2] babel, eslint):
这个选项会使用Vue 2作为项目的基础框架版本。
同样使用Babel进行代码转译,允许使用较新的JavaScript语法和特性,并确保项目的兼容性。
启用了ESLint,用于代码规范检查,以确保代码质量和一致性。
Manually select features:
这个选项允许你手动选择项目所需的功能和配置。
你可以根据项目需求选择要包含的特性,例如CSS预处理器、Router、Vuex等。
这个选项提供了更灵活的控制,但可能需要更多的配置和设置。
这里选择第三个,自定义
2.2.自定义vue功能
空格可以切换 选中|未选中 状态
方向盘上下用于选择
回车继续下一步操作
Babel:
Babel是一个JavaScript编译器,它能够将你的代码转换成向后兼容的版本,以确保它可以在更旧的浏览器中运行,同时还能够使用最新的JavaScript语法和特性。
TypeScript:
TypeScript是JavaScript的一个超集,提供了可选的静态类型检查以及最新的ECMAScript特性。它能够帮助你在编写代码时捕捉错误,并提供更好的代码自动补全、导航和重构功能。选择这个选项将为你的项目添加TypeScript支持。
Progressive Web App (PWA) Support:
PWA是一种可以提供类似原生应用体验的网页应用程序。这包括离线工作、推送通知和设备硬件访问等特性。选择这个选项将使你的Vue应用支持PWA功能,增强应用的可访问性和用户体验。
Router:
Vue Router是Vue.js的官方路由管理器。它允许你构建单页面应用程序(SPA),并通过URL管理不同视图的导航。选择这个选项将在项目中集成Vue Router。
Vuex:
Vuex是Vue.js的官方状态管理模式和库。它用于管理应用的所有组件的状态,并以一种可预测的方式改变状态。对于大型应用来说,这是非常有用的,因为它可以帮助你更好地跟踪和管理应用状态。
CSS Pre-processors:
CSS预处理器如Sass、LESS和Stylus等,允许你使用类似编程语言的特性编写CSS,例如变量、嵌套规则和混入(mixins)。选择这个选项将在项目中添加CSS预处理器的支持。
Linter / Formatter:
这个选项会启用代码规范检查工具(如ESLint)和代码格式化工具(如Prettier)。它们能够检查你的代码是否符合预定义的规则,并帮助保持代码的一致性和可读性。一般不选,会出现很多语法问题
Unit Testing:
单元测试允许你测试项目中的单独组件或函数,以确保它们按预期工作。常用的单元测试框架包括Jest和Mocha。选择这个选项将为你的Vue应用集成单元测试功能。
E2E Testing:
端到端(E2E)测试是一种测试方法,用于测试应用的整体流程是否按预期工作,从用户的角度出发。常用的E2E测试框架有Cypress和Nightwatch。选择这个选项将为项目添加端到端测试的支持。
一般默认这2个
2.3.选择vue版本
2.4.是否选择历史模式
这个选项是关于Vue Router的历史模式。历史模式通过使用浏览器的History API来管理路由,使URL看起来更加友好。但是,需要在生产环境中设置正确的服务器配置以处理对于单页应用的路由请求的回退。在这个例子中,是否要使用历史模式是一个选择。
2.5.选择配置信息存储位置
In dedicated config files:
这个选项表示你的项目配置将会被放置在专门的配置文件中。这些文件通常是单独的,比如 .babelrc 用于 Babel 的配置,vue.config.js 用于 Vue CLI 的配置等。这样的做法更加模块化和清晰,适用于需要复杂配置的项目。
In package.json:
这个选项表示你的项目配置将会放在 package.json 文件中的 vue 字段下。VueCLI会自动生成对应的配置项,如 babel, eslint 等,并统一放在 package.json中。这种方式适用于简单的项目或者你希望将所有配置都放在一个文件中的情况。
这里选择package.json
2.6.是否要将当前的配置保存为一个预设,以便将来在创建新项目时能够快速使用相同的配置
y:如果你希望将当前的配置保存下来,以便将来使用,可以选择"y"。
n:如果你不想保存当前的配置,可以选择"N"。
保存为预设可以节省时间,并确保在将来创建新项目时能够保持一致的配置。
2.7.创建完成
此时可以执行以下命令启动项目,需要切换到项目中
cd test01
执行启动命令
npm run serve
启动成功
2.8.解决npm加载项目缓慢
使用如下语句解决 npm 速度慢的问题,必须是在vue项目所在的目录中才能执行成功
npm install --registry=https://registry.npm.taobao.org
列出当前系统中已经配置的所有可用的 npm 源
nrm ls
选择指定npm源
nrm use <registry>
*表示当前选中的源