vue如何新建一个项目
vue创建项目(npm安装→初始化项目)
第一步npm安装
首先:先从nodejs.org中下载nodejs
双击安装,在安装界面一直Next 等待node.js安装完成,在DOS命令窗口下对node进行一些配置之后就可以开始安装vue了
在DOS命令窗口全局安装vue-cli3.0脚手架工具 启动GUI创建项目向导
注意:使用安装和启动命令最好用命令提示符(cmd)窗口
# OR
3 yarn global add @vue/cli
使用localhost:8000 在浏览器进入可视化管理页面(vue ui 启动之后会自动进入浏览器打开vue项目管理页面)
注意:所有的操作都是在DOS命令窗口执行vue ui命令才能拿正常操作否则vue项目管理页面上会提示连接中断的错误
插件安装
左边的导航栏选择插件图标,进入插件页面,所展示的是现在已经安装的插件
点击右上角的添加插件 进入所有插件页面
在搜索栏中输入自己所要安装的插件(以element为例)
显示为element插件时,安装时点击后面的加号
在整个页面下面看到"提示安装XXXXX"的按钮,点击即可安装插件
正在安装插件ing...
配置一些插件的选项等设置,进行调用
点击完成安装,调用之后才算插件正式安装成功
当右下角有弹出提示窗口,表示插件安装完毕
创建项目
vue项目管理器会展示已经创建好的项目,新建项目时点击创建
创建新项目,设置项目名称和包管理器或者添加git管理地址
创建项目的预设可以使用以前项目的预设也可以重新定义
预设好之后点击创建项目 进行项目的创建
项目创建成功后会在vue项目管理页面看到我们所创造的项目
项目启动: 直接点击创建好的项目名进入到项目管理页面,点击左侧导航栏第四个按钮 任务按钮 ,点击 运行按钮 启动项目 在输出里看到运行状态和编译结果
直接点击在编辑器中打开即可对项目进行代码编写(以vscode为例,)
点开readme.md文件可以看到相关信息及启动项目方式,在终端,
新终端用"npm run server"命令启动项目
在启动项目时可能会报错,错误原因是main.js中导入的包的格式不同,
把格式改相同即可启动程序
项目启动页面显示
补充:
如果安装element-ui插件启动报错:
这个是因为node-sass没安装好,所以要重新安装
国内只能用淘宝的镜像
windows下运行命令:
归类: vue学习
vue如何新建一个项目相关推荐
- VUE+VSCODE(新建一个项目)
VUE+VSCODE(新建一个项目) vue 新建一个项目 vue init webpack projectName ①.Project name (sanfeng1):项目名称(sanfeng1). ...
- vue如何新建一个项目(详细步骤)
vue创建项目 一.安装node环境与npm 1.首先:先从https://nodejs.org/en/中下载node.js 按照提示一直点next,直到Finish完成安装 2.打开控制命令程序cm ...
- vue如何新建一个项目(超详细哦--转)
原文链接 vue创建项目(npm安装→初始化项目) 第一步npm安装 首先:先从nodejs.org中下载nodejs 双击安装,在安装界面一直Next 直到Finish完成安装. 打开控制命令行程序 ...
- 从零开始,手把手交给你vue如何新建一个项目
vue创建项目(npm安装→初始化项目) 第一步npm安装 首先:先从nodejs.org中下载nodejs 图1 双击安装,在安装界面一直Next 图2 图3 图4 直到Finish完成安装. 打开 ...
- django新建一个项目_如何使用Django创建项目
django新建一个项目 Now that we know how to create virtual environments and use pip, we can begin building ...
- 【AD】Altium Designer 新建一个项目
软件版本:Altium Designer 14 通常一个嵌入式开发都需要一个开发板,这就涉及到原理图设计和PCB设计等流程.目前比较主流的设计软件当属Altium Designer了,于是便向写一个关 ...
- AUTOCAD_ELECTRICAL从入门到放弃(一)新建一个项目和修改编辑块的属性
AUTOCAD_ELECTRICAL从入门到放弃(一)新建一个项目和修改编辑块的属性 AUTOCAD ELECTRICAL据说画电路图比AUTOCAD要好用一点,那么就下载下来入坑看一看,到底使用起来 ...
- nodeJS入门——新建一个项目及代码详解
nodeJS入门--新建一个项目及代码详解 有了解nodejs的童鞋们知道,nodejs有很多的依赖,那么我们在新建一个项目的时候,如何快速的导入这些依赖从而创建一个nodejs项目呢,接下来会 ...
- Altium designer入门教程:新建一个项目
因为项目需要进行PCB设计,之前自学时,一直没有找到一个系统的介绍如何设计PCB的教程,因此萌生了自己撰写的想法.一方面总结一下,另一方面也可向大家分享知识,降低硬件电路设计的门槛. Altium d ...
最新文章
- Gym迎来首个完整环境文档,强化学习入门更加简单!
- 游戏服务器哪个系统困难些,游戏服务器哪个系统困难些
- H5禁止弹窗页面滚动
- jQuery的.live()和.die()
- 华农java实验7_国家实验教学示范中心
- cocos2dx 3.4 截图代码
- 高中学生计算机软件,中学生计算器
- php swoole yaf,swoole和yaf的区别
- Integrity数据库简介
- 如何自动翻译字幕文件(机翻)
- SVN忽略设置的方法
- macbookwps excel颜色填充快捷键_Excel VBA 实例(31) 为VBA代码自定义快捷键
- 刷脸支付的场景应用遍布大街小巷
- html table最小宽度,table宽度比tbody多1
- 创造一颗属于你的星球
- 学习金字塔---优化你的学习方法
- SVN“不知道这样的主机”
- Linux sys文件系统
- fiddler抓包教程------详细
- mysql cluster 7.5安装,mysql-cluster 7.3.5安装部署
热门文章
- MapReduce and Parallel DBMSs Friends or Foes
- Linux 学习过程jdk和mysql数据库安装
- 细数那些让人难以抗拒的经典数学书
- 从运动脑机接口到情绪脑机接口:马斯克脑机接口公司Neuralink背后的原理
- 【拿奖过节】国际程序员节:晒个图庆祝属于你的节日,抢荣耀9手机!
- JAVA_web基础 JavaScript简介、基础、语法
- 同步助手64位 v3.2.7.2 官方最新版
- ABIDE(自闭症)数据集(nii格式)下载
- 方案分享--直驱式风力发电实验仿真平台
- 《硅谷增长黑客实战笔记》我的增长黑客旅程 学习总结