五分钟掌握用Vue脚手架搭建一个完整项目!

简介: 五分钟掌握用Vue脚手架搭建一个完整项目!

1.在搭建项目之前,先安装淘宝镜像和命令行工具,可能需要等待一段时间(电脑安装过一遍之后,以后建项目时就不需要再安装):


       a.Win+R打开命令提示行cmd;

image.png



       b.进入命令行cmd,设置淘宝镜像;


npm config set registry https://registry.npm.taobao.org

       c.安装可生成脚手架代码的命令行工具;


npm i -g @vue/cli

       当命令行窗口显示 [ + @vue/cli@版本号 ] 时说明安装成功。


2.开始创建项目


       a.先决定要把项目文件夹保存在哪个位置;此处以test文件夹为例;


       b.进入test文件夹后,shift+鼠标右键打开power shell窗口;


image.png


c.运行 vue create 自定义项目名;此处以项目名为test为例,出现提示后按以下过程进行选择:


       1)? Please pick a preset:

image.png



       2)? Check the features needed for your project:

image.png



       3)? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  N


image.png


       4)? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)


image.png


       5)? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

image.png



       6)? Save this as a preset for future projects? (y/N)  N

image.png


       最后命令行窗口显示Successfully created project xzvue说明项目创建成功。

image.png



       此时我们便可在test文件夹中看到整个项目。


image.png


3.使用vscode打开并运行脚手架项目


(1)右键单击package.json文件,选择"在集成终端中打开";


(2)在终端窗口中输入:npm run serve,等待后出现App running at : - Local :http://localhost:8080/,如下:


image.png


(3)按住Ctrl,点local:右侧的连接,即可自动打开浏览器。


       需要的时候就可以在集成终端中输入npm i、npm i vant -S 等命令下载node_modules包、安装vant等等。


       注意vue采用的是热编译,修改后无需停止或重启项目,只要一修改,就会立刻自动重新编译,重新运行,自动在界面上显示新内容。


Vue实战知识点相关链接:


如何在vue页面中引入其他的子组件?(局部引入/全局引入)_小马学前端的博客-CSDN博客


如何在vue组件中引入外部的css和js文件_小马学前端的博客-CSDN博客


相关文章
|
6天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
6天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
6天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
11天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
11天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
12天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
12天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
12天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
12天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。