vue环境搭建和项目初始化

@lucas  April 29, 2023
vue 

Windows环境

1.安装Node.js

  • 1、下载node.js
    npm是node.js的包管理工具，用来安装各种node.js的扩展，安装完成后，默认会添加环境变量，执行命令测试是否安装成功：

    node -v
npm -v
  • 2、修改缓存目录（可选）
    依赖包等默认会下载到C:\Users\{user_name}\AppData\Roaming\npm, 可以新建两个空文件夹（node_cache、node_gloabl），用于存放之后下载的依赖等资源：
    2023-04-29T07:47:32.png

  • 3、设置缓存文件夹（下面是我的目录演示，引号后面改为你自己的Node目录）

    npm config set cache "D:\Environments\H5\NodeJs\node_cache"

  • 4、设置全局模块存放路径

    npm config set prefix "D:\Environments\H5\NodeJs\node_global"

  • 5、设置完成后可执行以下命令查看是否成功

    npm config get cache
npm config get prefix

    若显示路径已被更改（如下图），则缓存、全局模块存放路径就修改成功。

    PS C:\Users\seome> npm config get cache
G:\node\node_cache
PS C:\Users\seome> npm config get prefix
G:\node\node_global
PS C:\Users\seome>

3.添加环境变量

将G:\node\node_cache与G:\node\node_global添加到系统环境变量中。

4、更换镜像源

访问国外镜像源有时候不稳定，所以需要安装淘宝镜像源

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

执行命令看是否修改成功

npm config get registry

5、webpack方式：安装Vue-cli（可选）

  • 1、执行安装命令

    npm install -g  @vue/cli

    安装成功后输入命令检查

    vue -V

  • 2、创建项目

    • 图形化创建项目
      执行命令，启动图形服务：

      vue ui

      执行完毕后打开浏览器界面

      PS C:\Users\seome> vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

      项目创建完毕后执行npm run serve或者npm run dev运行项目

    • 命令行创建项目
    • 1.输入 切记一定要是管理员权限打开命令行，不然可能会因为权限问题创建不成功
      vue create 项目名

    • 2.一路回车即可

      在终端执行命令：
      npm run serve或者npm run dev

    • 3.vue-cli目录解析

      • build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置less、sass等css预编译库，或者配置一下 UI 库。
      • config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
      • dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
      • node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
      • src: 存放项目源码及需要引用的资源文件。
      • src下assets：存放项目中需要用到的资源文件，css、js、images等。
      • src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
      • src下emit：自己配置的vue集中式事件管理机制。
      • src下router：vue-router vue路由的配置文件。
      • src下service：自己配置的vue请求后台接口方法。
      • src下page：存在vue页面组件的文件夹。
      • src下util：存放vue开发过程中一些公共的.js方法。
      • src下vuex：存放 vuex 为vue专门开发的状态管理器。
      • src下app.vue：使用标签渲染整个工程的.vue组件。
      • src下main.js：vue-cli工程的入口文件。
      • index.html：设置项目的一些meta头信息和提供用于挂载 vue 节点。
      • package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

6、 vite方式（可选）

在本地搭建 Vue 单页应用。创建的项目将使用基于Vite的构建设置，并允许我们使用 Vue 的单文件组件(SFC)。

npm init vue@latest

这一指令将会安装并执行create-vue，它是 Vue 官方的项目脚手架工具。
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。

您将看到一些可选功能的提示，例如 TypeScript 和测试支持：

✔ Project name: … your-project-name
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formating? … No / Yes

Scaffolding project in ./your-project-name...
Done.

如果启动您的项目选项，请暂时No选择返回车辆进行创建。

cd your-project-name

npm install
npm run dev

您现在应该可以运行您的第一个 Vue 项目了！
当您准备好将您的应用程序发布到生产环境时，请运行以下命令npm run build

./dist这将在项目应用程序的应用程序的生产版本中，了解您的相关生产目录。您将查看生产应用程序的应用程序创建的更多信息。

7、element-ui

详解Vue与element-ui整合方式
vue项目引入element-ui

添加新评论