vue的安装和环境设置

本文介绍了 Vue 2.0 环境配置和项目搭建过程。采用 npm 方式,需安装 node.js、vue-cli、vue-router 等。通过命令行完成安装和项目创建,安装依赖后用 VScode 运行项目。还介绍了项目各目录文件的作用,主要开发工作在 src 目录进行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-cli2.0没有可视化图形界面的,所以整个下载和创建项目的过程,我们都是在cmd里面进行。

(据说cli3.0出了图形操作界面)

这里采用官网上面推荐的npm方式:

需要下载和安装的:

  • node.js:自带npm
  • vue-cli:脚手架构建工具,可以帮助我们创建项目
  • vue-router:vue跳转页面的路由,在创建项目时候可选择安装
  • 依赖:安装项目所必须的依赖文件
  • VScode:最好用来写vue代码的IDE

1.安装node.js

官方网址:https://nodejs.org/en/

安装完成后:

打开命令行检测版本信息:分别输入node-v    npm-v

2.安装国内淘宝镜像cnpm

用cnpm来替代npm,加速我们接下来依赖环境的下载速度

输入命令:npm install -g cnpm --registry=http://registry.npm.taobao.org 

3.安装vue-cli脚手架工具

  • 输入命令:npm install -g vue-cli 
  • 在本地电脑创建一个目录来保存vue项目
  • 并进入到该目录下:cd  NodeTest

创建一个项目:

输入命令:vue init webpack firstApp

firstApp为项目名,你可以自己随便起名,但要注意命名规则

运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息等等,

对于有些不明白或者不想填的信息可以一直按回车去填写。

Install  vue-router?  这里选yes,没选也没事,后面可以在IDE里手动安装。

接着去看项目是否创建成功:

4.项目创建成功,但还缺少依赖文件

进入到项目中,安装项目的依赖

输入命令:cd       firstApp

输入命令:cnpm    install 

如果安装过程无反应或者意外中断,可以关闭cmd重新打开,重复这一步命令。

安装完成:进入项目目录下可以看到多出一个node_modules文件夹

5.安装IDE:VScode

官方网站:https://code.visualstudio.com/

下载对应自己电脑的版本

6.运行项目

将创建好的项目拖拽入VScode当中,在下面的终端

输入命令:npm  run  dev

这样项目就被启动起来了:

接下来在浏览器看到如下页面:

 这是vue的helloworld页面,至此vue的环境已经配置完毕。

 

7.介绍一下各个目录文件的作用

介绍一下目录及其作用:

     build:最终发布的代码的存放位置。

     config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

     node_modules:npm 加载的项目依赖模块。

     src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

             assets:放置一些图片,如logo等

             components:目录里放的是一个组件文件,放置我们书写的vue页面。

             App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。

            main.js :项目的核心文件

     static:静态资源目录,如图片、字体等。

     test:初始测试目录,可删除

      .XXXX文件:配置文件。

     index.html:首页入口文件,可以添加一些meta信息或者其他的信息。

     package.json:项目配置文件。

     README.md:项目的说明文件。

  

    这就是整个项目的目录结构,其中,我们主要在src目录中做修改。

 

### Node.js Vue 安装教程 #### 三、Node.js 的安装配置 为了使用 Vue.js 进行开发,首要条件是拥有最新版的 Node.js。确保计算机上已经安装了至少 18.0 版本以上的 Node.js[^1]。 对于 Windows 用户来说,可以从官方网站获取最新的安装包并按照向导完成安装过程;Linux 用户可以通过包管理器如 `apt` 或者 `yum` 来更新至所需版本;macOS 则可以借助 Homebrew 工具来进行操作。另外,也可以通过 NVM(Node Version Manager) 方便地管理切换不同版本的 Node.js 环境[^3]。 验证安装是否成功的命令为: ```bash node -v && npm -v ``` 如果返回的是具体的版本号,则说明安装正常。 #### 四、Vue 开发环境搭建 ##### (一)安装 Vue CLI 脚手架工具 官方推荐的方式是利用 Vue 提供的命令行工具——Vue CLI 来快速建立项目框架结构。这一步骤依赖于之前提到过的 Node.js 及其自带的包管理器 npm。因此,在此之前应该先确认 Node.js 是否正确安装[^2]。 安装 Vue CLI 使用如下命令: ```bash npm install -g @vue/cli ``` 检查安装情况可执行: ```bash vue --version ``` ##### (二)创建新的 Vue 项目 有了 Vue CLI 后就可以很方便地初始化一个新的 Vue 应用了。这里提供两种方式:一种基于传统模式(`vue create`),另一种则是更现代的选择 Vite (`npm create vite@latest`),后者对较新版本的 Node.js 支持更好[^4]。 以 Vite 为例,具体指令如下所示: ```bash npm create vite@latest my-vue-app --template vue cd my-vue-app npm install npm run dev ``` 上述命令将会引导用户一步步设置项目的各项参数,并最终启动本地服务器以便预览效果。 #### 五、总结 综上所述,整个流程涵盖了从准备必要的软件基础到实际动手实践的过程。值得注意的是,除了遵循以上指导外,还应当关注可能出现的各种错误提示信息及其解决方案,比如处理 node.exe 文件丢失或是 npm 缓存报错等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值