教你一步步使用vue创建项目【超详细(^_−)☆】

工具 Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
CLI(全称：command-line interface，命令行界面)，在熟记命令的前提下，使用命令行界面往往要较使用图形用户界面的操作速度要快。

Node.js安装

npm安装
首先：先从nodejs.org中下载nodejs
node.js 中文网

node.js 外网

找到安装路径 文件 然后双击安装，在安装界面一直Next，直到Finish完成安装。
node.js 安装完成 自动安装npm

打开控制命令行程序（CMD）,检查是否正常

直接使用npm 的官方镜像访问外网比较慢，然后就可以使用淘宝 NPM 。

• 使用阿里定制的cnpm命令行工具代替默认的npm，输入以下代码：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 检查是否安装成功：$ cnpm -v
• 安装成功之后，以后安装依赖包的方式和npm的是一样的，只是npm的命令换成是cnpm，这样就可以使用cnpm 命令来安装模块了。

[ 注：npm是下载完node.js自带的，或者可以用yarn（官网下载 ）。]

安装Vue CLI 脚手架

1.全局安装 vue-cli：cnpm install vue-cli -g
（ cnpm i -g vue-cli 安装老版本~~~只有 4 以上版本脚手架才可以支持 Vue3 ）

1.1 .旧版本的删除：cmd 命令行

npm uninstall vue-cli -g

1.2.新版本的安装：cmd 命令行

npm install -g @vue/cli

1.3. 安装成功与否的检测方法

vue --version

1.4. 安装报错Install fail! Error: GET https://registry.npmmirror.com/vue-cli-g response 404 status
在计算机中搜索cmd,找到命令提示符以管理员身份运行后再次安装

2.检查 vue 是否安装成功(安装成功后会显示版本号)：vue -V

3.选定路径，新建vue项目
方法一：在桌面上打开cmd，然后cd目录路径
方法二：直接在需要创建文件的目录下 打开cmd

创建完成之后按各自需求选择
上下键：选择 回车：确定下一步 空格：选项选择或取消

回车下一步


接着 选择y或 n 都可 回车

等待完成…（如果长时间不进行，网路出现问题，可以 Ctrl+c 结束当前 从新开始）

到此为止 ，一个简单的项目就创建完成了。
接下来用编辑器（这里用的Visual Studio Code）打开文件看一下文件组成

Visual Studio Code需要安装插件Vetur
vetur的特性: 语法高亮, 代码片段(emmet给我的感觉是一个写好了的snippet), 质量提示&错误、格式化/风格、智能提示等。

安装路由router

创建路由时安装 vue add router

import VueRouter from 'vue-router'
Vue.use(VueRouter)

安装elementUI

npm i element-ui -S

main.js引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);    // 即可直接使用文档

安装axios

cnpm i axios --save

在 main.js 中引入 axios

import axios from 'axios'
Vue.prototype.$axios = axios

在组件中使用 axios

<script>
	export default {
		mounted(){
			this.$axios.get('/goods.json').then(res=>{
				console.log(res.data);
			})
		}
	}
script>

(扩展知识)修改npm默认安装路径并配置环境变量 或 直接配置环境变量

修改NPM全局模式的默认安装路径## 标题
引用 “柯晓楠” 文章

修改npm默认源（修改npm全局安装路径）
引用“鹿茗๓”文章