创建一个vue项目具体步骤_搭建一个vue框架的准备过程

创建一个vue项目具体步骤_搭建一个vue框架的准备过程如何创建一个vue项目详细步骤(vue-cli2/vue-cli3)(webpack/vite)_创建vue项目

一、环境准备

1、安装 node.js

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

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

 2、检查是否安装成功:输出版本号说明安装成功

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

3、安装淘宝镜像 (淘宝镜像速度比较快)

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

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

4、检查 cnpm 是否安装成功 cnpm -v

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

二、搭建 vue 环境

使用 webpack 搭建 Vue 项目时,需要安装 vue-cli 和 webpack、webpack-cli。

1、全局安装脚手架 vue-cli

  • npm install -g vue-cli         (vue-lcli2,使用vue-cli2.x初始化项目安装这个)
  • npm install -g @vue/cli      (vue-cli3,使用vue-cli3.x初始化项目安装这个) 

安装 3 以下版本的脚手架 

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

安装 3 以上版本的脚手架  

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

 2、检查是否安装成功:输出版本号说明安装成功

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

3、全局安装 webpack

npm install -g webpack

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

4、全局安装 webpack-cli

npm install -g webpack-cli

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

三、创建 vue 项目的五种方法 

方法一:vue init webpack 项目名(vue-cli2.x的初始化方式)

以管理员身份打开命令行界面 (按住 shift 鼠标右键 打开 PowerShell),输入命令:

vue init webpack blog 创建项目(blog 是项目名)

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

 如果没有选择初始化项目,需要进入项目目录,输入 npm install 初始化

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

 输入 npm run dev 运行项目

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

项目创建成功

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

方法二:vue create 项目名 (vue-cli3.x的初始化方式)

脚手架 vue-cli3.x 创建的 vue3 项目是基于 webpack 打包的。

 以管理员身份打开命令行界面 (按住 shift 鼠标右键 打开 PowerShell),输入命令:

vue create system 创建项目 (system 是项目名)

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

创建一个vue项目具体步骤_搭建一个vue框架的准备过程进入项目目录,输入 npm run serve 运行项目 

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

项目创建成功

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

方法三:npm init vue@latest 

npm init vue@latest 创建的 vue3 项目是基于 Vite 打包的。

npm init vue@latest 安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

执行后创建项目:

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

在项目被创建后,通过以下步骤安装依赖并启动开发服务器: 

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

在浏览器打开:

创建一个vue项目具体步骤_搭建一个vue框架的准备过程 

方法四:构建一个 Vite + Vue 项目

npm 版本不同,命令不同:

  • npm6.x:npm create vite@latest my-vue-app –template vue
  • npm7.x+:npm create vite@latest my-vue-app — –template vue

选择一个框架 => vue 

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

选择一个编程语言 => TypeScript

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

项目构建完成,进入项目目录、初始化项目并运行

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

浏览器打开: 

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

方法五:基于图形化界面的方式创建 vue 项目 (vue ui)(vue-cli3.x) 

@vue/cli3.0 增加一个可视化项目管理工具,全局安装完成 cli3.0 之后,可以直接在 cmd 输入命令:vue ui 启动即可,地址默认是 localhost:8000 ( 回车后打开 )

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

 可以通过导入你的 vue 项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

 创建完 

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

还可以查看运行依赖和开发依赖的以及在线安装和更新依赖,非常方便

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

 任务按钮下,你可以运行项目、打包项目,检查等操作。

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

四、使用 webpack 创建 vue-cli2.x 项目和 vue-cli3.x 项目的区别

创建一个vue项目具体步骤_搭建一个vue框架的准备过程

  1. vue-cli3 移除了配置文件目录:config 和 build 文件夹,增加了vue.config.js文件,移除了static 静态文件夹,新增了 public 文件夹并将 index.html 移动到 public 中。
  2. vue-cli2 在 config 中的 dev.env.js 和 prod.env.js 中分别配置域名,vue-cli3 在 vue.config.js中配置域名 vue-cli2 在 config 中的 index.js 中配置跨域,vue-cli3 在 vue.config.js中配置跨域。
  3. vue-cli3 内部封装了 webpack 且做了很多适合 vue 项目的优化,可以用 vue.config.js 来管理项目,vue-cli2 更加适合有特殊需求的,毕竟是原生的,但管理起来复杂,一般来说,vue-cli3 够用了,但是 vue-cli3 能实现的,vue-cli2 一定能实现,vue-cli2 可以实现的 vue-cli3 不一定能实现。

今天的文章创建一个vue项目具体步骤_搭建一个vue框架的准备过程分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/69024.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注