首先上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,代表引入成功了。