Vue学习——使用vue-cli搭建一个简单的本地vue项目

前提

• 安装好node.js、npm、vue-cli。为什么要先安装这些，建议查看https://www.cnblogs.com/zuiyue_jing/p/10673875.html，这个对于vue-cli理解很重要。

步骤

• 安装node.js
  • 搜索node.js进入官网，直接下载node.js安装即可。
     
  • 安装好之后，打开控制台，输入node -v命令，命令行显示出node.js版本就安装成功。
    
  • Next
• 安装npm
  • 安装好node.js之后，npm自动安装好。安装好之后，打开控制台，输入npm -v命令，命令行显示npm版本就安装成功。
    
  • Next
• 安装vue-cli
  • 进入cmd控制台，输入命令npm config set registry https://registry.npm.taobao.org（网速好，此步骤可省略，直接进入到下一步）
  • 进入cmd控制台，输入命令npm install -g vue-cli安装vue-cli。
  • 安装好之后，输入命令vue -V（注意V大写）查看vue-cli是否安装成功）。
    
  • Next
• 创建项目
  
  • 打开cmd,进入想要创建项目的目录
  • 进入目录后，输入命令 vue init webpack project-name
    • project-name是你打算创建vue项目的名称
      
  • 输入命令之后，cmd会自动下载webpack模板，然后出现几个关于项目信息配置的步骤，依次输入即可
    
    • Project name：项目名称，此处你可以选择更改，直接按下回车键，自动默认为初始输入的项目名称test-project
    • Project description：项目描述，自己输入
    • Author：项目开发人员
    • Vue build:项目构建模式，默认即可，按下回车
    • Install vue-router：项目是否安装vue路由，选择yes，进行安装
    • Use ESLint to lint your code：是否选择ESLint开发验证功能，新手选择no
    • Set up unit tests：是否开启单元测试，建议选择y，在后期开发中一定会用到的
    • Pick a test runner：选择开启单元测试，就会有选择测试方式，默认即可
    • Setup e2e tests with Nightwatch：是否开启e2e测试，选择no
    • Should we run 'npm install' for you after the project has been created
      • Yes，use NPM：选择这个代表在项目初始化后，会自动使用NPM联机下载项目所需要的插件
      • Yes，use Yarn：择这个代表在项目初始化后，会自动使用Yarn联机下载项目所需要的插件
      • No，I will handle that myself：后期手动下载项目所需要插件
      • 网速好，建议选择“Yes，use NPM”，网速不好，建议选择“No，I will handle that myself”
  • 项目创建之后，我们可以看到文件目录如下
    
    • 注意，红色框标记的文件夹，如果在创建项目时，没有选择“Yes，use NPM”，这个文件夹是不存在的。
  • Next
• 安装插件（如果在创建项目时最后一步选择“Yes，use NPM”，此步骤可略过）
  • cmd进入到项目根目录，输入命令npm install，开始自动下载项目所需插件。
  • 插件下载完成后，你讲会看到上面的完整项目目录。
• 运行项目
  • cmd进入到项目根目录,输入命令npm run dev，如下图
    
  • 浏览器访问http://localhost:8080/,出现下图项目搭建成功，在此基础上开发自己想要的项目即可。
    
  • Next
• Next