五分钟掌握用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博客


相关文章
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
9天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
47 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
10天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
57 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
11天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
57 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
9月前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
166 0
|
9月前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
177 0
|
9月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
173 0
Vue3+Vite+TypeScript常用项目模块详解
|
9月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
90 3

热门文章

最新文章