vue+axios+element-ui实战(一)--使用Vue CLI 搭建项目
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,使用 Vue CLI 可以快速创建 vue 项目。一、安装node.js使用Vue CLI首先需要安装node环境,可以到中文官网进行下载安装:https://nodejs.org/en/download/安装完成后,打开命令窗口,输入命令node -v,可以检查node的版本,输入npm -v检查npm 的版本:...
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,使用 Vue CLI 可以快速创建 vue 项目。
一、安装node.js
使用Vue CLI首先需要安装node环境,可以到中文官网进行下载安装:https://nodejs.org/en/download/
安装完成后,打开命令窗口,输入命令node -v,可以检查node的版本,输入npm -v检查npm 的版本:
二、安装Vue CLI
安装完node,便可以全局安装Vue CLI,输入命令:
npm install -g vue-cli
安装完成后可以输入vue -V 检查是否安装成功:
如果出现如图版本号了,则表示安装成功,如果安装过程太慢,可以使用淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
检查是否安装成功:
cnpm -v
然后cnpm install -g vue-cli进行安装Vue CLI。
因为Vue 模板中自带webpack,可以不安装webpack。
三、搭建项目
进入你的项目目录,输入vue init webpack Vue-Project。
然后,进入项目目录cd Vue-Project,启动项目:npm run dev。
如图,则启动成功。复制地址到浏览器,打开如下页面:
我们可以用编辑器(我使用webStorm)打开项目,找到config下的index.js文件,把autoOpenBrowser改为true,这样在启动项目时,就会自动打开浏览器,port是配置端口,可以自由配置。
四、安装scss(sass)
安装sass的依赖包:
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
如果看到红框里面的提示,可以忽视。
然后,我们在build文件夹下的webpack.base.conf.js的rules里面添加以下配置:
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
在HelloWorld.vue中使用,style标签中加上lang="scss":
如果你不喜欢用scss,还可以用less等其他css预处理语言,这里不做安装方法介绍了。
五、安装element-ui
全局引用安装:npm i element-ui -S
在main.js中写入:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
然后我们可以对照element-ui文档:http://element-cn.eleme.io/#/zh-CN/component/installation 在页面中使用了,比如我们在HelloWorld.vue使用:
<el-button type="primary">主要按钮</el-button>
你也可以按需引入:npm install babel-plugin-component -D ,这里不做详细介绍了,大家可以自行百度。
好啦,到目前为止,项目就简单搭建好了,在下一篇内容里,将会讲到axios请求封装。
更多推荐
所有评论(0)