vue-cli安装配置并搭建element-UI
首先安装npm,然后安装vue-cli,最后初始化项目,需要注意的是网络很重要,如果网络好按步骤来很轻松就能安装配置好,如果网络不好的情况下,会出现多次npm err!的情况,这时候要清除缓存重装,重装好几次都不一定能成功安装npm:下载node的安装包进行安装。在命令行工具里输入npm -v 检测你是否安装了npm和版本情况下载地址:http://nodejs.cn/downl...
首先安装npm,然后安装vue-cli,最后初始化项目,需要注意的是网络很重要,如果网络好按步骤来很轻松就能安装配置好,如果网络不好的情况下,会出现多次npm err!的情况,这时候要清除缓存重装,重装好几次都不一定能成功
安装npm:
下载node的安装包进行安装。在命令行工具里输入npm -v 检测你是否安装了npm和版本情况
下载地址:http://nodejs.cn/download/
安装vue-cli
命令行操作:
1、npm install -g cnpm --registry=https://registry.npm.taobao.org
2、全局安装:npm install vue-cli -g (全局卸载:npm uninstall vue-cli -g)
如安装失败输入npm cache clean --force 命令清除缓存重装
3、添加path:搜索vue.cmd的位置,一般地址为C:\Program Files\nodejs\node_global,把文件的路径加入Path中。
4、查看是否安装成功:vue -V
初始化项目
命令行操作:vue init webpack hello
输入命令后,会有几个简单的选项,根据需要选择
Project name :项目名称 ——默认
Project description:项目描述——默认
Author:作者——默认
Install vue-router? 是否安装vue的路由插件——y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。——n
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具——n
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试——n
命令行操作:
1、cd hello 进入我们的vue项目目录
2、npm install 安装我们的项目依赖包,网络不好选用cnpm install
3、npm run dev 开发模式下运行我们的程序
4、浏览器中输入locahost:8080,到此完成npm安装配置
最后介绍下初始化命令使用和搭建element-ui:
vue init <template-name> <project-name>
<template-name>表示模板名称(一般使用webpack):
webpack-一个全面的webpack+vue-loader的模板
webpack-simple-webpack-simple-一个简单webpack+vue-loader的模板
browserify-一个全面的Browserify+vueify 的模板
browserify-simple-一个简单Browserify+vueify的模板
simple-一个最简单的单页应用模板
<project-name>:标识项目名称
搭建element-ui:
在项目目录下输入命令行npm i element-ui -S,上面依赖包选了cnpm install这里要同步cnpm,否则run会报错
完成以后生成的项目如图,新建了table.vue并添加组件代码
在main.js中配置如下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
index中添加代码import和routes中的table
import table from '@/components/table'
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/table',
name: 'table',
component: table
},
]
})
到此完成了elementUI组件引用,效果图如下
更多推荐
所有评论(0)