手把手教你如何快速搭建一个Vue项目

一. 安装node环境

• 安装vue.js
  • 下载地址为： https://nodejs.org/en
• 检查是否安装成功，使用命令：node -v

效果如下：

• npm是一个非常有用的JavaScript包管理工具，通过npm可以非常迅速进行Vue.js的安装，使用和升级。为了提高效率，我们可以使用淘宝的镜像：如下

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

注：要是以后用的npm时，可以直接用cnpm代替

检查是否安装成功，使用命令：cnpm -v
效果如下：

搭建Vue项目环境

1. 搭建vue的开发环境，安装vue的脚手架工具 官方命令行工具

   • npm insatll --global vue-cli
     

2. 创建项目

   vue init webpack vue-demo
   
   介绍说明

• Vue build —> 打包方式，直接回车即可。
• Install vue-routrt —> 是否要安装vue-router 后期项目会用到，输入Y回车即可。
• Use ESLint to lint your code —> 是否对js语法检查，为了代码规范性和准确性，我选择Y回车。
• Set up unit tests —> 是否安装单元测试工具，根据个人喜好选择，我选择n回车。
• Set e2e tests with Nightwatch —> 是否需要单元测试，选择n即可。

3. 进入项目cd vue-demo (安装依赖)

cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略，如果报错了，cd到项目中运行

• 安装成功后，项目文件夹下回多出一个目录：node_modules
  
• 使用命令 npm run dev 启动项目
  效果如下
  

快来上手试一试，开始您的Vue项目开发之旅吧，希望以上的内容会对您的学习带来帮助，谢谢！