如何搭建vue-cli项目开发环境及前期准备

1、安装node.js,进入官网下载安装

如何搭建vue-cli项目开发环境及前期准备

如何搭建vue-cli项目开发环境及前期准备

2、打开npm命令行工具,测试node.js版本,代码:node --version。测试npm版本,代码:npm --version

如何搭建vue-cli项目开发环境及前期准备

3、安装vue-cli,代码:npm install --g vue-cli  。测试版本代码:vue --version

如何搭建vue-cli项目开发环境及前期准备

4、如果安装成功,可以直接在控制台打出 vue 来检测是否完成安装。
接下来打印

如何搭建vue-cli项目开发环境及前期准备

会发现有一些vue支持的模板,我们主要需要用到webpack模板。直接打印出:

如何搭建vue-cli项目开发环境及前期准备

会弹出询问

如何搭建vue-cli项目开发环境及前期准备

接下来打印:

如何搭建vue-cli项目开发环境及前期准备

等待一段时间之后,运行

如何搭建vue-cli项目开发环境及前期准备

如果出现 Your application is running here: http://localhost:8080 则代表已完成了Vue脚手架的安装.

5、进入项目列表,设置文件包

如何搭建vue-cli项目开发环境及前期准备

6、根文件index.html

如何搭建vue-cli项目开发环境及前期准备

7、header.vue子组件在根组件App.vue的展示

如何搭建vue-cli项目开发环境及前期准备

如何搭建vue-cli项目开发环境及前期准备

8、css样式的展示

如何搭建vue-cli项目开发环境及前期准备

9、stylus文件的编写以及引入和使用方法

如何搭建vue-cli项目开发环境及前期准备

如何搭建vue-cli项目开发环境及前期准备

10、数据请求方式

如何搭建vue-cli项目开发环境及前期准备