安装环境

1 下载安装 node
http://nodejs.cn/download/

设置npm 镜像源为淘宝镜像源
npm config set registry http://registry.npm.taobao.org/
2 安装 vue
https://cn.vuejs.org/v2/guide/installation.html

npm install vue
cnpm install vue
3 安装vue-cli
2的版本安装命令
cnpm install -g vue-cli
3及4的版本安装命令 (如果已经安装了2的版本 需要先卸载 卸载命令 npm uninstall vue-cli -g)
cnpm install -g @vue/cli
4创建前端工程
创建工程的命令 demo 指的是项目名称

vue init webpack demo 版本2

vue create demo 版本3 windows需要设置命令别名 （~/.bashrc 添加 alias vue=’winpty vue.cmd’ 重启git）
5 进入目录 执行安装包
cnpm install
启动项目
npm run dev

#

安装ui框架库并使用

1 饿了么组件ui
饿了么ui

安装组件库
npm i element-ui -S

导入库
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
使用库
Vue.use(ElementUI);

2 iview组件ui
iviewUI

安装iview库
npm install view-design —save

导入库
import ViewUI from ‘view-design’;
import ‘view-design/dist/styles/iview.css’;
使用库
Vue.use(ViewUI);

典型布局
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>

使用按钮组件
<Button>Default</Button>
<Button type="primary">Primary</Button>
<Button type="dashed">Dashed</Button>
<Button type="text">Text</Button>
<Button type="info">Info</Button>
<Button type="success">Success</Button>
<Button type="warning">Warning</Button>
<Button type="error">Error</Button>

#

安装网络模块axios并简单使用
1 安装 axios
http://www.axios-js.com/

2 发起请求
// 为给定 ID 的 user 创建请求
axios.get(‘/user?ID=12345’)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// 上面的请求也可以这样做
axios.get(‘/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post(‘/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone’
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});