您的位置: 首页  >  文章  >  Vue 安装与项目搭建

Vue 安装与项目搭建

分类: 文章 • 2023-11-27 08:59:22
Vue 安装与项目搭建
一、Vue 安装

项目选择 Vue 框架开发，需要搭建 vue 依赖环境；前面介绍了关于 nodejs 环境搭建与配置 ，那么接下来在安装 vue 就很容易了。
一个 Vue 项目也许不一定会用到 Vue 全家桶，但为了方便，可以先全部安装。

  1. 打开命令行，依次输入下面指令

    npm install -g vue

npm install -g vue-router

npm install -g vue-cli

  2. 安装完后，使用 Vue 指令 进行验证： 查看版本号 （ -V 是大写的）

    vue -V

    注意：当 报错：vue不是内部命令时，请查看环境变量中的系统变量，安装的 nodejs 路径是不是指向的 node_global 文件夹。

二、Vue 项目搭建

以上步骤都安装完成，就可以进行项目新建了；此时，不管在任何路径下都可以进行项目的创建。

  1. 进入创建项目的路径下，按住 “shift + 右键” ，进行 cmd 命令行；
  2. 初始化项目： project-name 为项目的文件夹名字，可任意定义
    vue init webpack project-name
  3. 根据提示填写信息，及设置需求，如下图：
    Vue 安装与项目搭建
  4. 进入项目文件夹：
    cd project-name
  5. 运行项目：
    npm run dev
  6. 上一步运行完后，会显示运行地址，此时可以在浏览器中直接输入该地址；

如果在浏览器中显示：Welcome to Your Vue.js App，恭喜你，项目搭建成功！！！

相关推荐