如何创建vue项目,创建的方式?

创建vue项目的方法主要有3种:

1.Vue CLI: Vue CLI是官方提供的脚手架工具,可以通过命令行工具快速创建一个Vue项目。

2.使用 Vite 工具创建 Vue 项目。

3.使用webpack创建vue项目。


一.使用 Vue CLI 工具创建 Vue 项目的方法如下:

  1. 安装 Node.js 和 npm

首先需要安装 Node.js 和 npm 包管理器,Node.js 官网提供了对应的安装包和指南,可以根据自己的操作系统和版本选择下载和安装。

  1. 安装 Vue CLI

通过 npm 安装 Vue CLI,使用以下命令:

npm install -g @vue/cli
  1. 创建 Vue 项目

进入到要创建项目的目录,使用 Vue CLI 创建项目,使用以下命令:

vue create my-project

其中 my-project 是你要创建的项目名称,也可以根据需要替换成其他名称。

  1. 选择项目配置项

执行上述命令后,会提示你选择项目配置项,包括预设、特性和插件等。你可以根据自己的需求和喜好进行选择,或者直接按 Enter 键使用默认值。

  1. 运行项目

使用以下命令运行项目:

cd my-project npm run serve

其中 my-project 是你创建的项目名称,在项目根目录下执行 npm run serve 命令后,会启动开发服务器,你可以在浏览器中访问 http://localhost:8080 查看项目效果。

以上就是使用 Vue CLI 工具创建 Vue 项目的方法。


二.使用vite创建vue项目,这也是官方推荐的创建方式。

  1. 安装 Node.js

首先需要安装 Node.js,可以根据自己的操作系统和版本选择下载和安装。

  1. 安装 Vite

通过 npm 安装 Vite,使用以下命令:

npm install -g vite
  1. 创建 Vue 项目

进入到要创建项目的目录,使用 Vite 创建项目,使用以下命令:

vite create my-project

其中 my-project 是你要创建的项目名称,也可以根据需要替换成其他名称。执行上述命令后,Vite 会在当前目录下创建一个新的项目,但需要手动安装相关依赖。

        1,进入项目目录,使用npm install 下载依赖。

2.运行项目

使用以下命令运行项目

 npm run dev

其中 my-project 是你创建的项目名称,在项目根目录下执行 npm run dev 命令后,会启动开发服务器,你可以在浏览器中访问 http://localhost:3000 查看项目效果。

以上就是使用 Vite 工具创建 Vue 项目的方法,Vite 是一个基于 ES Module 的开发工具,可以帮助开发者快速搭建 Vue 项目,并提供了快速热重载、按需加载等功能,可以大大提升开发体验。


三.使用webpack搭建vue项目(1)

  1. 安装 Node.js 和 npm

首先需要安装 Node.js 和 npm 包管理器,Node.js 官网提供了对应的安装包和指南,可以根据自己的操作系统和版本选择下载和安装。

  1. 初始化项目

在命令行中进入要创建项目的目录,执行以下命令初始化项目:

npm init -y

该命令会生成默认的 package.json 文件,其中 -y 参数表示使用默认值。

  1. 安装依赖

在命令行中执行以下命令安装 Vue 相关依赖:

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server css-loader style-loader babel-loader @babel/core @babel/preset-env --save-dev

其中,各个依赖的作用如下:

  • vue:Vue.js 框架库。
  • vue-loadervue-template-compiler:用于编译 Vue 单文件组件(.vue 文件)。
  • webpackwebpack-cliwebpack-dev-server:Webpack 相关库,用于构建和开发服务。
  • css-loaderstyle-loader:用于解析 CSS 样式文件。
  • babel-loader@babel/core@babel/preset-env:用于将 ES6+ 语法转换为浏览器可执行的 JavaScript。
  1. 配置 Webpack

在项目根目录下新建一个 webpack.config.js 文件,并添加如下代码:

const path = require('path'); const webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true, open: true } }

其中,各个配置的作用如下:

  • entry:指定 Webpack 构建入口文件。
  • output:指定 Webpack 构建输出文件。
  • module.rules:指定模块加载规则,例如用 vue-loader 处理 .vue 文件、使用 css-loader 和 style-loader 处理样式文件等。
  • plugins:插件配置,这里使用了热更新插件 HotModuleReplacementPlugin
  • devServer:开发服务配置,例如启用热更新和自动打开浏览器等。
  1. 编写代码

src 目录中编写 Vue 组件的代码,在 main.js 中创建 Vue 实例并渲染组件。

  1. 运行项目

在命令行中执行以下命令启动开发服务:

npx webpack serve

这会启动 Webpack 的开发服务,可以在浏览器中访问 http://localhost:8080 查看项目效果。

以上就是使用 Webpack 创建 Vue 项目的方法,虽然需要手动配置比较复杂,但是可以根据需求进行高度的自定义和扩展,是比较灵活和强大的构建工具。

如果使用的是较新版本的 Node.js(v5.2.0 以上),则 npx 已经自带在其中,无需额外安装。如果您的 Node.js 版本过低,可以通过 npm 安装 npx:

npm install -g npx

这个命令会全局安装 npx,安装完成后即可在命令行中使用 npx 命令。

需要注意的是,npx 只能在 npm v5.2.0 及以上版本中使用。如果您的 npm 版本过低,可以通过以下命令升级到最新版本:

npm install -g npm@latest

升级完成后就可以安装和使用 npx 了。

使用webpack创建vue项目(2)

  1. 首先安装Node.js和npm。
  2. 在命令行中输入以下命令全局安装vue-cli: npm i -g @vue/cli-init。
  3. 创建一个新的vue项目:vue init webpack my-project。
  4. 进入项目目录:cd my-project。
  5. 安装依赖:npm install。
  6. vue init webpack text4
    
    ? Project name text4//项目名称
    ? Project description A Vue.js project//项目描述
    ? Author leihaolog <[email protected]>//项目作者
    ? Vue build standalone//构建方式
    ? Install vue-router? Yes//下载路由
    ? Use ESLint to lint your code? Yes//下载代码检测
    ? Pick an ESLint preset none//选择分支风格
    ? Set up unit tests No//是否安装单元测试
    ? Setup e2e tests with Nightwatch? No//选择一个单元测试运行器
    ? Should we run `npm install` for you after the project has been created? (recommended) npm//选择运行方式
    
       vue-cli · Generated "text4".

    这个项目是个vue2的项目

  7. 完整的创建步骤可以参考这个链接:使用webpack搭建vue项目;webpack+vue_webpack创建vue项目_max_YaoXC的博客-CSDN博客

你可能感兴趣的:(vue.js,javascript,前端)