🙋 好久不见,甚是想念
⭐本期内容:搭建Vue项目
🏆系列专栏:从0开始的Vue之旅
安装教程可以参考前期文章哦:node.js的安装和配置
点击Win+R
,回车,输入node -v
和npm -v
则可查看node和npm的版本。
执行命令:npm install -g @vue/cli
其中-g
是全局安装
检查是否安装成功:执行命令vue -V
(注意:是大V不是小v哦~)
新建一个文件夹,在文件夹上的导航栏处输入cmd
,点击回车
执行命令:vue create test
,此时可以看到三个选项,前两个为默认选项,第三个为手动选择功能,按键盘上的上下箭头可进行选择。这里我们选择第三个手动选择功能选项。
接下来可以选择预设,选择Babel和Router,按空格键可进行选择。
以下是Vue2中这些选项的解释和功能:
Babel
:Babel是一个广泛使用的JavaScript编译器,可以将ES6+的代码转换为向后兼容JavaScript版本,确保代码可以在旧版本的浏览器上运行。 允许开发者使用最新的JavaScript特性,而不用担心浏览器兼容性问题。TypeScript
:TypeScript是JavaScript的一个超集,添加了静态类型、接口和类等功能。提供更强的代码结构和类型检查,有助于大型项目的维护和开发。Progressive Web App (PWA) Support
:PWA是一种可以提供原生应用体验的网络应用,具有诸如离线访问、推送通知等功能。使得Vue应用可以像原生应用一样在移动设备上安装和使用,提供更丰富的用户体验。Router
:Vue Router是Vue.js官方的路由管理器。它和Vue.js深度集成,使得构建单页面应用(SPA)变得简单。管理页面之间的导航和路由,允许开发者定义路由规则、动态路由、导航守卫等。Vuex
:是Vue.js的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。提供状态管理,使得多组件之间的状态共享和同步变得简单。CSS Pre-processors
:CSS预处理器允许使用变量、嵌套规则、混合等功能来编写CSS,然后编译成普通的CSS代码。提供更强大和可维护的CSS编写方式。Linter / Formatter
:Linter和Formatter是代码质量和风格检查工具。帮助开发者检查代码中的错误和不符合规范的地方。确保代码质量和风格的一致性,减少错误。Unit Testing
: 单元测试是针对代码中的最小可测试单元(通常是函数或方法)进行的测试。确保每个代码单元都按预期工作,提高代码质量和可维护性。E2E Testing
:端到端(E2E)测试是模拟用户操作,从应用的入口开始,一直到某个预期的输出结束,确保整个流程的正确性。确保整个应用的流程和交互都按预期工作。 选择Vue的版本,这里我们选择2.x
是否为路由使用历史记录模式,这里我们输入Y。
Vue Router中的history模式的好处主要体现在URL的外观和用户体验上。
选择配置地址,dedicated config files 是专用配置文件,package.json 定义了一个项目的元数据和依赖项,包含了关于项目如何运行、项目依赖哪些库、项目的名称、版本、描述、作者等详细信息。
这里我们选择In package.json
是否将其保存为未来项目的预设,这里我们输入N。接着回车,创建项目ing~
执行命令cd test
,npm run serve
在浏览器输入http://localhost:8080/
,看到如下页面则为创建成功
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~