Vue创建前端项目

首先上node.js官网(nodejs.org/zh-cn/)，下载安装包，直接运行安装完成之后，就已经具备了node和npm环境。
在这里插入图片描述
使用node -v
npm -v 查看是否安装成功

node -v
npm -v

在这里插入图片描述

# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm i -g @vue/cli

安装vue-cli 3.0，才会有vue ui命令,安装完Vue3.0 后使用命令 vue ui

# 打开vue的可视化管理工具界面
vue ui

在这里插入图片描述
然后浏览器访问localhost:8000

然后点击创建，创建的目录和运行vue ui同一级。然后点击按钮【在此创建项目】

项目文件夹中输入项目名称“blog-vue”，点击下一步

勾选手动配置项目，然后点击下一步。
在这里插入图片描述
勾选上路由Router、状态管理Vuex、

关掉去掉js的校验，然后点击下一步
打开Use history mode for router，然后点击创建项目。

选择【创建项目，不保存预设】，vue项目就创建成功了。
然后我们使用WebStorm打开这个项目。
在这里插入图片描述
components组件用途，比如头部、左侧工具栏、尾部、这些公共的部分，抽取出来，放到组件里。
router是用来配置路由的地方
store是数据状态管理的地方，如果子组件更新，通知另外的组件，所有的组件都监听store，所以一旦有组件发生变化，就会通知其他组件数据同步。

安装element-ui，引入element-ui组件（element.eleme.cn），这样我们就可以获得好看的vue组件。

# 切换到项目根目录
cd blog-vue
# 安装element-ui
cnpm install element-ui --save

然后打开项目src目录下的main.js，引入element-ui依赖。
在这里插入图片描述
安装axios（www.axios-js.com/），axios是一个基于 promise 的 HTTP 库

cnpm install axios --save

然后同样我们在main.js中全局引入axios。
在这里插入图片描述

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

在package.json文件里，出现elementui，axios，代表引入成功了。
在这里插入图片描述

猜你喜欢