如何开始一个Vue项目

你的名字 2023-02-09 05:26 30阅读 0赞

### Vue 开发环境配置 ###

**Vue 生态为我们提供了一个配套的脚手架 Vue Cli 参考官方文档:[https://cli.vuejs.org/zh/guide/][https_cli.vuejs.org_zh_guide]**

使用脚手架之前首先要全局安装 ，vue 脚手架分新旧版本有一些区别，支持有所不同，可以参考官方文档介绍

npm install -g vue-cli (2.x)

npm install -g @vue/cli-init (2.x 到 3.X 过度 可以使用2.x 的init 命令)

npm install -g @vue/cli 在执行此命令时 出了点小问题 之前配置的node 环境有问题

//卸载当前的版本 安装制定版本

npm uninstall -g @vue/cli

npm install -g @vue/cli@版本号

=========================================================

**创建项目**

**vue create myvuedemo**

**在项目创建过程中有一些选择 根据自己的需要记性选择即可**

**另外cli 3.x及以上的版本支持使用vue ui 可视化的方式创建项目并进行对应的初始化配置**

**执行命令 vue ui 即可**

**cd myvuedemo**

**npm run serve 可以将初始化的项目跑起来**

项目配置 在运行完成后自动打开浏览器

在文件 package.json 中 找到 scripts节点 增加--open 如下：

"scripts": \{

"serve": "vue-cli-service serve --open",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

\},

具体其他配置参考官方文档 [https://cli.vuejs.org/zh/guide/prototyping.html][https_cli.vuejs.org_zh_guide_prototyping.html]

脚手架创建的项目已经有了基本配置 这样我们可以将更多的经历放在项目的设计及对应业务逻辑的实现上。

[https_cli.vuejs.org_zh_guide]: https://cli.vuejs.org/zh/guide/
[https_cli.vuejs.org_zh_guide_prototyping.html]: https://cli.vuejs.org/zh/guide/prototyping.html

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关从零开始快速搭建一个vue项目

一、环境准备 node.js [node官网链接][node] 检查是否安装node.js,若未安装则去官网下载，安装完成后，在系统设置中配置node的环境变量，

﹏ヽ暗。殇╰゛Y/ 2024年03月22日 20:36/ 0 赞/ 108 阅读

相关如何开始一个Vue项目

Vue 开发环境配置 Vue 生态为我们提供了一个配套的脚手架 Vue Cli 参考官方文档:[https://cli.vuejs.org/zh/guide/][http

你的名字/ 2023年02月09日 05:26/ 0 赞/ 31 阅读

相关如何运行一个Vue项目

一开始很多刚入手vue.js的人，会扒GitHub上的开源项目，但是发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了

超、凢脫俗/ 2022年12月31日 13:19/ 0 赞/ 240 阅读

相关 vue如何新建一个项目

vue创建项目（npm安装→初始化项目）第一步npm安装首先：先从nodejs.org中下载nodejs ![在这里插入图片描述][watermark_type_

逃离我推掉我的手/ 2022年12月22日 11:27/ 0 赞/ 263 阅读

相关如何新建一个vue项目

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 第一步npm安装首先：先从nodejs.org中

﹏ヽ暗。殇╰゛Y/ 2022年10月01日 15:55/ 0 赞/ 313 阅读

相关如何开始一个Git项目

Command line instructions Git global setup git config --global user.name "suta

缺乏、安全感/ 2022年05月25日 14:12/ 0 赞/ 161 阅读

相关 1.vue如何新建一个项目

新年好，猪事顺利(＾Ｕ＾)ノ~ＹＯ 1.安装node 首先确保已安装了node，安装步骤略。可以使用 " node -v " 查看；再者，node安装成功后会将[npm

分手后的思念是犯贱/ 2022年04月23日 09:30/ 0 赞/ 333 阅读

相关如何运行一个Vue项目

一开始很多刚入手vue.js的人，会扒GitHub上的开源项目，但是发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了

Dear 丶/ 2022年03月09日 01:24/ 0 赞/ 300 阅读

相关如何搭建一个vue项目

[如何搭建一个vue项目][vue] 一、安装node环境　　1、下载地址为：[https://nodejs.org/en/][https_nodejs.org_en]

以你之姓@/ 2021年12月17日 17:13/ 0 赞/ 474 阅读

相关 vue-用Vue-cli从零开始搭建一个Vue项目

Vue是近两年来比较火的一个前端框架（渐进式框架）。 Vue两大核心思想：组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用；数据驱动是前端的

迷南。/ 2021年11月15日 12:52/ 0 赞/ 439 阅读