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

前提

步骤

  • 安装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
posted @ 2019-04-09 22:40  话·醉月  阅读(1973)  评论(0编辑  收藏  举报