【Vue基础】前端工程化Vue项目

一、创建Vue项目步骤

1、新建一个文件夹，起名为vue_project01

2、在该文件夹中打开cmd，输入指令vue ui，打开图形化界面

3、此时跳转到网页，根据以下步骤配置vue项目

1）项目名命名为test01；选择包管理器为npm；关闭初始化Git仓库

2）选择手动配置

3）选择Router，其他不变

3）选择vue版本为2.0；选择语法检测规则为“ESLint with error...”；点击创建项目时在弹出的窗口中选择“创建项目不保存预设”，此时正在下载，预计1分钟，此过程需保持联网。出现Ready时下载完成，如下图1；此时浏览器显示如下图2；自己建的文件夹vue_project01中出现tese01项目，如下图3

4、用VS Code打开项目test01

5、启动NPM SCRIPTS的serve...如下图2

注：如果没有NPM脚本，需要点击资源管理器右边的“...”，勾选NPM Scripts，如下图1

如果"..."处没有NPM Scripts选项，参考链接2在下方TERMINAL处输入指令调起服务：

npm run serve

6、若想修改端口号，比如将8000改为7000，步骤如下：

1）修改代码；终止批处理操做

2）刷新后，链接显示端口为7000，如下图1。点击跟随链接跳转到网页，网页地址栏也显示端口号变为7000，如下图2

二、参考链接

1、前端工程化Vue项目教程

https://www.bilibili.com/video/BV1m84y1w7Tb?p=38&vd_source=841fee104972680a6cac4dbdbf144b50

2、https://blog.csdn.net/qq_43416650/article/details/121679282

【Vue基础】前端工程化Vue项目相关推荐

vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
前端vue基础学习之vue项目文件结构
vue项目文件结构查看上一篇前端基础学习之vue的生命周期 build文件用于打包创建dist目录 webpack.base.conf.js alias配置别名 config index.js ho ...
基于single-spa+vue的前端微服务项目实践
基于single-spa + vue 的前端微服务拆分及实践项目 **一. 前端微服务化的背景和价值: 背景:业务模块呈现快速增长趋势,孵化的业务模块也逐渐增多. 价值:让产品的前端架构能快速.插件化 ...
Vue基础Day_01学习+Vue项目创建报错(true` in `“vueCompilerOptions“` property)解决方案
Vue_Study01 1.Vue是什么? 1.1-Vue怎么学 Vue是在工程化的环境下进行学习的 1.2-Vue开发方式 1.3-Vue脚手架项目创建目录 1.x-创建工程文件报错解决方案注意 ...
Vue基础入门(2) Vue.js下载与安装
下载与安装Vue.js Vue.js的官网: https://cn.vuejs.org/ 如果在项目中使用Vue.js框架,有两种方式:一是在页面中使用Script的方式直接引入,可以在官网下载Vue ...
【vue基础】黑马vue视频笔记（二）
文章目录一.过滤器(vue2) (1)Filters过滤器概念 (2)定义过滤器 (3)私有过滤器和全局过滤器 (4)其他 (5)过滤器的注意点二.watch 侦听器 (1)什么是侦听器 (2)侦 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
【Vue基础】关于Vue中CSS的scoped属性作用域与样式穿透
scoped 在了解scoped属性之前,先了解一下Vue(中的插件)在渲染DOM时干了什么.Vue在渲染DOM后会在DOM节点上生成一个随机串data属性,这一属性给了当前组件下的DOM一种唯一标识 ...
vue 基础入门：vue 的调试工具
1. 安装 vue-devtools 调试工具 vue 官方提供的 vue-devtools 调试工具,能够方便开发者对 vue 项目进行调试与开发. Chrome 浏览器在线安装 vue-devto ...

【Vue基础】前端工程化Vue项目

【Vue基础】前端工程化Vue项目相关推荐

最新文章

热门文章