vue如何新建一个项目

vue创建项目（npm安装→初始化项目）

第一步npm安装

首先：先从nodejs.org中下载nodejs

    双击安装，在安装界面一直Next 等待node.js安装完成,在DOS命令窗口下对node进行一些配置之后就可以开始安装vue了

在DOS命令窗口全局安装vue-cli3.0脚手架工具    启动GUI创建项目向导

  1 npm install -g @vue/cli

  2 vue ui

使用localhost:8000 在浏览器进入可视化管理页面(vue ui 启动之后会自动进入浏览器打开vue项目管理页面)
注意:所有的操作都是在DOS命令窗口执行vue ui命令才能拿正常操作否则vue项目管理页面上会提示连接中断的错误
插件安装
左边的导航栏选择插件图标,进入插件页面,所展示的是现在已经安装的插件
点击右上角的添加插件 进入所有插件页面
在搜索栏中输入自己所要安装的插件(以element为例)
显示为element插件时,安装时点击后面的加号
在整个页面下面看到"提示安装XXXXX"的按钮,点击即可安装插件
正在安装插件ing...
配置一些插件的选项等设置,进行调用
点击完成安装,调用之后才算插件正式安装成功
当右下角有弹出提示窗口,表示插件安装完毕

创建项目
vue项目管理器会展示已经创建好的项目,新建项目时点击创建
创建新项目,设置项目名称和包管理器或者添加git管理地址
创建项目的预设可以使用以前项目的预设也可以重新定义
预设好之后点击创建项目 进行项目的创建
项目创建成功后会在vue项目管理页面看到我们所创造的项目

直接点击在编辑器中打开即可对项目进行代码编写(以vscode为例,)

      点开readme.md文件可以看到相关信息及启动项目方式,在终端,

     新终端用"npm run server"命令启动项目

     在启动项目时可能会报错,错误原因是main.js中导入的包的格式不同,

    把格式改相同即可启动程序

项目启动页面显示

归类: vue学习

vue如何新建一个项目

原文：https://www.cnblogs.com/lz1996/p/12382938.html