vue新旧版本创建项目

最新推荐文章于 2024-05-08 11:47:35 发布

原创最新推荐文章于 2024-05-08 11:47:35 发布 · 置顶 · 423 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

博客聚焦前端部分，主要介绍了Vue项目的环境配置。包括node.js、npm的安装，以及Vue.js脚手架的安装与项目创建。还提及若npm版本低需升级，cnpm下载速度更快，同时说明了新版vue需自行配置vue.config.js。

前端部分

使用Vue开发下载安装node，Vue-cli，npm是必不可少的

查看是否已安装好node，npm

node -v  查看 node
npm  -v  查看 npm

查看结果如果所示表示安装成功
如果npm版本低于3.0则需要升级npm
安装cnpm完成测试图
如果cnpm安装失败问题也不大，npm只是速度相对cnpm会慢一点

下载cnpm比npm速度更快

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Vue 脚手架

旧版本
cnpm 安装 cnpm install -g vue-cli
npm  安装 npm install -g vue-cli
新版本
cnpm 安装 cnpm install -g @vue/cli
npm  安装 install -g @vue/cli

查看vue是否安装
安装完成
创建项目

方法一:如果是使用新版的vue可以使用Vue ui创建项目

vue ui

启动ui创建项目面板
ui面板

点击创建项目输入项目名称下一步即可

或者使用命令创建项目
vue create 项目名
或vue init webpack 项目名

方法二

vue init webpack 项目名

默认下一步
在这里插入图片描述

安装完成之后使用编译器打开项目
项目的目录结构

如果使用的是新版的vue
新版vue创建项目

差别：新版的vue需要自己配置vue.config.js