Vue.js 环境搭建并初始化一个项目

  |   0 评论   |   186 浏览

1. 安装node.js

  1. 点击进入node.js官网
    1.png

  2. 下载完成后打开一路next安装即可。

  3. 安装完成后验证node.js是否安装成功。运行cmd命令行窗口输入node -v即可显示对应的node.js版本。
    2.png

  4. 目前node.js中均已集成npm包管理器。输入npm -v即可显示对应的npm版本。
    3.png

  5. 输入命令npm -g install npm即可将npm更新到最新版本。由于目前笔者npm已经更新到最新,故在此不做展示。

2. 安装cnpm

  1. 由于npm的服务器在国外部署。所以造成对国内有些地方访问速度过慢,所以建议使用cnpm。以下是cnpm官网的介绍。

这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

  1. 安装cnpm,在cmd命令窗口中执行npm install -g cnpm --registry=https://registry.npm.taobao.org即可。
  2. 安装完成后打开一个新的cmd命令窗口输入cnpm -v出现版本号表示安装成功。

cnpm跟npm用法一致,只是在执行命令时将npm改为cnpm。

3. cnpm安装vue-cli脚手架

  1. 在cmd命令行中执行cnpm install -g vue-cli即可安装脚手架

4. 使用webpack构建项目

  1. 使用cmd命令窗口进入项目路径后,执行vue init webpack demo-vue命令后会自动生成Vue项目
    4.png

5. 安装项目依赖

  1. 使用cmd命令窗口进入demo-vue文件夹后执行cnpm instal命令即可。
    5.png

6. 运行项目

  1. 使用cmd命令窗口进入demo-vue文件夹后执行npm run dev命令即可。
    6.png

  2. 运行成功后浏览器访问 http://localhost:8080即可看到运行效果了
    7.png

end

评论

发表评论