Vue.js环境配置

Vue.js环境配置

注：新手一枚，本篇博客为了给自己的学习做个记录，若有表述错误或其他错误欢迎指正，谢过各位了 ！[手动抱拳]

1.安装node.js

• 去到node.js官网，下载与系统匹配的node.js版本
  
• 安装时，注意选择安装路径，一路默认+next，最后在cmd中输入：node -v，若出现nodejs的版本号，则表示安装成功

2.安装vue.js

1.使用淘宝镜像

• 因为npm服务器在国外，安装速度慢，所以先使用如下命令使用淘宝镜像（此步骤需要保持网络畅通），在cmd中输入：
  npm install -g cnpm –registry=https://registry.npm.taobao.org
• 输入上面的命令，报错了（有点难受），报错如下图：
  
  //读一下报错，发现好像是版本的问题
• 按照提示输入如下命令：
  cnpm install cnpm@6.0.0
• 出现如下提示，就代表成功了
  
• 验证一下，输入如下命令：
  cnpm -v
• 出现如下提示，表示成功
  

2.安装vue

• 输入如下命令安装vue.js:
  cnpm install vue
• 出现如下提示，表示成功
  

3.搭建vue-cli

补充：vue-cli是官方的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。提供开箱即用的构建工具配置，带来现代化的前端开发流程。

• 下面是利用vue-cli建立项目的步骤：
  • 进入安装Vue.js的文件夹（C:\Users\qwasz\node_modules\vue）创建一个空文件夹，比如：VueTest，进入VueTest，在cmd中输入：
    cnpm install -g vue-cli
    得到如下结果：
    
  • 输入vue list得到如下图示：
    
  • 输入vue将看到如下：
    ![v
  • 创建一个文件夹（eg.FirstProject），进入该路径，输入vue init webpack 工程名
    
  • 进入新创建的工程路径：cd my-project
    输入cnpm install安装各种包
    
  • 输入cnpm run dev
    
  • 在浏览器中输入http://localhost:8080
    
  • 成功！！！

4.运行现有的工程

• 进入项目路径，在cmd中先输入cnpm install安装相关包
• 再输入cnpm run dev
• 浏览器中打开localhost:8080即可

参考：

• 博客教程
  https://www.cnblogs.com/riddly/p/7857710.html
  https://www.cnblogs.com/pengfei-nie/p/6979217.html