Vue.js脚手架工具环境搭建

安装Vue.js和命令行工具

• Vue基于Node.js，所以需要安装Node，所以第一步，我们先下载安装Node.js。下载地址是：http://nodejs.cn/download/ 选择你对应的系统，下载相应的版本。Windows用户还要注意系统的位数。
• 下载完成后，打开安装文件，一直下一步直到完成安装。
• win+R,输入powershell，打开windows命令行工具

image.png

4、输入npm，查看是否安装成功

image.png

出现上图结果则安装成功

• 应为默认的npm仓库源在国外，速度很慢，所以我们安装淘宝的npm源cnpm。
  打开http://npm.taobao.org/ 找到这一句：
  

  

  image.png

• 在命令行输入：

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

等待安装完成。

• 然后我们就可以安装Vue了，命令行输入

cnpm install -g vue

• 安装vue-cli，脚手架工具，在命令行输入：

cnpm install -g vue-cli

• 这时我们在命令行输入vue，出现下图结果，表示这一步我们全部成功

image.png

---

初始化Vue工程

现在我们就可以初始化一个项目了。首先我们要定位到我们的项目地址，我的项目地址是D盘WWW文件夹

在powershell中，cd是改变目录的意思，cd 目录就是转到该目录，cd .. 返回上一层目录，ls是列出文件，输入一部分文件名后，可以按tab键自动补全。

• 我们在命令行中cd到d盘www文件夹下：
  

  

  image.png

• 这是我们需要新建一个vue文件夹，mkdir命令就是新建文件夹：
  

  

  image.png

• 再cd到VueJS

• 这是我们可以初始化Vue项目了，用命令

vue init webpack 项目名

可以初始化：

image.png

• 然后根据提示输入项目名，项目描述和作者信息：

  
  
  

  image.png

• 出现这个提示，按回车键：

  
  
  

  image.png

• 后面的是否需要安装XXX全部选n
  

  

  image.png

• 到这里全部初始化完成

  
  
  

  image.png

• 这是需要按照他的提示来，

  
  
  

  image.png

• 先进入项目目录

cd todolist

image.png

• 再安装依赖项

cnpm install

image.png

等待安装完成

image.png

• 安装完成后cnpm run dev 启动服务器，这是可以访问http://localhost:8080访问此项目
  

  

  image.png

• 到此项目初始化完成。

  
  
  

  image.png

开始写吧！

这里可以参考慕课网的相关课程：
戳这里

---

结束

var author = {
  name:'丁波',
  GitHub:'dingbo1028',
  University:'BNUZ'
}