当前位置: 首页 > news >正文

怎样创建一个VUE项目(超简单)

目录

一、安装node.js 

二、搭建vue环境

1、全局安装@vue/cli模块包

2、执行命令

3、检查是否安装成功

三、创建vue项目

1、创建项目

 2、选择模板和包管理器,等待项目创建完毕

四、启动vue项目

1、执行命令

2、浏览项目页面

五、vue项目目录文件含义和作用

六、修改端口号

七、清理欢迎界面

补充:解决App.vue 代码是黑白色的方法


一、安装node.js 

下载地址:https://nodejs.org/en/

检查是否安装成功:node -v(如果显示出了版本号,那么说明安装成功了)

二、搭建vue环境

1、全局安装@vue/cli模块包

vue官网:https://cn.vuejs.org/

2、执行命令

安装@vue/cli -g

npm install @vue/cli -g

3、检查是否安装成功

vue -V

 

三、创建vue项目

1、创建项目

选择一个你想要创建项目的文件夹,打开控制端执行如下命令

vue create 项目名

注意:项目名不能有大写字母,中文和特殊符号

 2、选择模板和包管理器,等待项目创建完毕

(蓝色字体表示当前选中的,按键盘上下键即可选择)

选择模板后,等待项目创建完毕即可

四、启动vue项目

1、执行命令

        创建完项目后,控制端页面会如上图所示,此时我们我们只要按上图提示内容,执行相关命令即可。

cd 项目名 // 进入到该项目的文件目录下

npm run serve  // 启动内置的webback本地热更新开发服务器

2、浏览项目页面

执行上面的启动项目命令后,控制端页面会如下所示:

 如果未自动弹出浏览器,手动复制输入提示的域名+端口。在浏览器中访问即可

五、vue项目目录文件含义和作用

 六、修改端口号

项目中没有webpack.config.js文件,因为vue脚手架项目用的vue.config.js。

在src并列目录中新建vue.config.js,填入如下配置,最后重启服务器即可修改端口号

module.exports = {
    devServer: { // 自定义服务配置
    port: 3000, // 修改的端口号
    open: true
}

七、清理欢迎界面

        对于我们自己开发,创建新的vue项目目录下有很多文件是不需要的,可以直接清理掉

assests和components文件夹下的一切都删除掉(不要默认的欢迎页面)。

        src/App.vue默认有很多内容,可以全部删除留下template和script和style的框

补充:解决App.vue 代码是黑白色的方法

下载一个vetur插件就可以了

         安装vetur后代码就可以显示为彩色的了,同时还可以使用多种快捷键命令,比如在.vue文件中,直接输入命令vue,就可以直接打出template和script和style的框。

 

相关文章:

  • C++【STL】【queue的使用和模拟实现】【priority_queue的使用和模拟实现】
  • SAP PI PO 接口常见问题处理:在监控器中找不到一个或多个 XI 消息的日志记录
  • L2TP客户端之Strongswan移植(三)
  • matplotlib入门之抛砖引玉
  • java-php-python-springboot携手助学助学交流平台计算机毕业设计
  • Android wifi sniffer log总结分析
  • 山东大学数字图像处理实验(二)
  • linux多个jdk时,java -version显示的版本有错误
  • 【论文笔记】An Image Patch is a Wave: Phase-Aware Vision MLP
  • 【前端升全栈】 五分钟了解Node.js
  • 部署若依springboot-vue前后端分离项目(Nginx反向代理 2022)
  • Kafka 优化问题
  • 【opencv-c++】windows10系统VisualStudio2022配置opencv_contrib-4.6.0
  • windows安装动力学仿真软件Frost并计算cassie机器人运动学和动力学
  • 使用 SolidJS 和 TypeScript 构建任务跟踪器
  • SegmentFault for Android 3.0 发布
  • $translatePartialLoader加载失败及解决方式
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • 【跃迁之路】【519天】程序员高效学习方法论探索系列(实验阶段276-2018.07.09)...
  • canvas绘制圆角头像
  • JDK 6和JDK 7中的substring()方法
  • 初识MongoDB分片
  • 浮动相关
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题
  • 如何打造100亿SDK累计覆盖量的大数据系统
  • 我的zsh配置, 2019最新方案
  • 做一名精致的JavaScripter 01:JavaScript简介
  • 06-01 点餐小程序前台界面搭建
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • ​一文看懂数据清洗:缺失值、异常值和重复值的处理
  • ###项目技术发展史
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (4)Elastix图像配准:3D图像
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (安卓)跳转应用市场APP详情页的方式
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (七)Java对象在Hibernate持久化层的状态
  • (十一)图像的罗伯特梯度锐化
  • (四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (学习日记)2024.01.19
  • (一)认识微服务
  • .bat批处理(九):替换带有等号=的字符串的子串
  • .NET HttpWebRequest、WebClient、HttpClient
  • .Net7 环境安装配置
  • .NET处理HTTP请求
  • .NET连接数据库方式
  • .net用HTML开发怎么调试,如何使用ASP.NET MVC在调试中查看控制器生成的html?
  • .skip() 和 .only() 的使用
  • @RestControllerAdvice异常统一处理类失效原因
  • [ vulhub漏洞复现篇 ] JBOSS AS 5.x/6.x反序列化远程代码执行漏洞CVE-2017-12149
  • [ 隧道技术 ] 反弹shell的集中常见方式(四)python反弹shell